Прелоадер CSS · Батарейка

Прелоадер CSS - Батарейка

Прелоадер в виде батарейки с анимированными индикаторами заряда, можно использовать в качестве индикатора загрузки страницы, сделано описание установки и демо пример использования.

Установка прелоадера батарейка с зарядом

Установка 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

Рейтинг: 5.0/5 из 4



Добавлено Автор Ник Источник Просмотров Комментариев Теги
18-10-2015 Михаил Меренков aTmpl © 438 0 css, Прелоадер, индикатор, Батарейка