Установка прелоадера батарейка с зарядом
Установка CSS стилей прелоадера
Стили прелоадера можно добавить в основной файл стилей CSS.
<style>
#battery--block {position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background: #fff;overflow: hidden !important;z-index: 99999}
#battery{position: absolute;top:50%;left:50%;width:93px;height:40px;margin:-46.5px 0 0 -46.5px}
#battery--indicator{
position:relative;
background-color:rgba(0,0,0,0.2);
width:9px;height:16px;margin:0
}
#battery--indicator:after,
#battery--indicator:before{
content:"";
background-color:
transparent;
border:6px solid rgba(0,0,0,1);
border-radius:2px;
position:absolute
}
#battery--indicator:before{width:93px;height:40px;margin:-12px;}
#battery--indicator:after{width:6px;height:16px;margin:0 87px}
.indicator--one{background-color:transparent;width:9px;height:16px;position:absolute}
.indicator--two{-webkit-animation:indicator--two 3s linear infinite;animation:indicator--two 3s linear infinite;left:15px}
.indicator--tree{-webkit-animation:indicator--tree 3s linear infinite;animation:indicator--tree 3s linear infinite;left:30px}
.indicator--for{-webkit-animation:indicator--for 3s linear infinite;animation:indicator--for 3s linear infinite;left:45px}
.indicator--five{-webkit-animation:indicator--five 3s linear infinite;animation:indicator--five 3s linear infinite;left:60px}
@keyframes indicator--two{0%{opacity:0}100%,25%,50%,75%{opacity:1;background-color:rgba(0,0,0,0.4)}}
@-webkit-keyframes indicator--two{0%{opacity:0}100%,25%,50%,75%{opacity:1;background-color:rgba(0,0,0,0.4)}}
@keyframes indicator--tree{0%,25%{opacity:0}100%,50%,75%{opacity:1;background-color:rgba(0,0,0,0.6)}}
@-webkit-keyframes indicator--tree{0%,25%{opacity:0}100%,50%,75%{opacity:1;background-color:rgba(0,0,0,0.6)}}
@keyframes indicator--for{0%,25%,50%{opacity:0}100%,75%{opacity:1;background-color:rgba(0,0,0,0.8)}}
@-webkit-keyframes indicator--for{0%,25%,50%{opacity:0}100%,75%{opacity:1;background-color:rgba(0,0,0,0.8)}}
@keyframes indicator--five{0%,25%,50%,75%{opacity:0}100%{opacity:1;background-color:rgba(0,0,0,1)}}
@-webkit-keyframes indicator--five{0%,25%,50%,75%{opacity:0}100%{opacity:1;background-color:rgba(0,0,0,1)}}
</style>
Настройка CSS стилей прелоадера
- #battery--indicator{
- background-color:rgba(0,0,0,0.2); - цвет первого индикатора.
- #battery--indicator:after,
#battery--indicator:before{ - border:6px solid rgba(0,0,0,1); - размер, стиль и цвет бордюра батарейки.
- @keyframes indicator--two{
@-webkit-keyframes indicator--two{ - background-color:rgba(0,0,0,0.4); - цвет второго индикатора.
- @keyframes indicator--tree{
@-webkit-keyframes indicator--tree{ - background-color:rgba(0,0,0,0.6); - цвет третьего индикатора.
- @keyframes indicator--for{
@-webkit-keyframes indicator--for{ - background-color:rgba(0,0,0,0.8); - цвет четвёртого индикатора.
- @keyframes indicator--five{
@-webkit-keyframes indicator--five{ - background-color:rgba(0,0,0,1); - цвет пятого индикатора.
Установка HTML кода прелоадера
Установите код прелоадера сразу после тега <body>.
<div id="battery--block"> <div id="battery"> <div id="battery--indicator"> <div class="indicator--one indicator--two"></div> <div class="indicator--one indicator--tree"></div> <div class="indicator--one indicator--for"></div> <div class="indicator--one indicator--five"></div> </div> </div> </div>
Установка JS скрипта прелоадера
Если Вы собираетесь использовать прелоадер в качестве индикатора загрузки страницы, установите скрипт прелоадера перед закрывающим тегом </body>.
<script>
jQuery(window).load(function() {
$("#battery--indicator").fadeOut();
$("#battery--block").delay(400).fadeOut("slow");
});
</script>
Демо прелоадера батарейка с зарядом
В предоставленном демо прелоадера можно редактировать HTML код, для просмотра CSS анимации удалите скрипт из демо примера.
► Нажмите на значёк 
в редакторе для показа результата.
Результат работы стилей CSS может отличаться, смотрите изменённый вариант на странице CODEPENСмотреть CODEPEN