Прелоадер CSS · Bounce

Прелоадер Bounce

Во время загрузки страницы сайта или отдельного элемента можно подключить индикатор прелоадер Bounce в виде анимированных пульсирующих точек, описан процесс установки и демо использование.

Установка прелоадера Bounce

Установка CSS стилей прелоадера

Стили прелоадера можно добавить в основной файл CSS в самый низ.

<style>
body.loaded .block-loading{opacity:0}
body.loaded .block-loading-inner{transform:translate3d(0,-100px,0)}
body .block-loading{
background-color:#fff;
height:100%;
left:0;
position:fixed;
right:0;
top:0;
z-index:9;
-webkit-transition:opacity .5s ease 0s;
-o-transition:opacity .5s ease 0s;
transition:opacity .5s ease 0s
}
body .block-loading-inner{
-webkit-transition:-webkit-transform .5s ease 0s;
-moz-transition:-moz-transform .5s ease 0s;
-o-transition:-o-transform .5s ease 0s;
transition:transform .5s ease 0s;
left:50%;
margin-left:-35px;
margin-top:-12px;
position:absolute;
text-align:center;
top:50%
}
.block-elements{width:70px}
.block-elements .full-elements{
width:18px;
height:18px;
background-color:#000;
border-radius:100%;
display:inline-block;
-webkit-animation:block-elements 1.4s ease-in-out 0s infinite both;
animation:block-elements 1.4s ease-in-out 0s infinite both
}
.block-elements .elements1{
-webkit-animation-delay:-.32s;
animation-delay:-.32s
}
.block-elements .elements2{
-webkit-animation-delay:-.16s;
animation-delay:-.16s
}
@-webkit-keyframes block-elements{
0%,100%,80%{
-webkit-transform:scale(0);
transform:scale(0)
}
40%{
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes block-elements{
0%,100%,80%{
-webkit-transform:scale(0);
transform:scale(0)
}
40%{
-webkit-transform:scale(1);
transform:scale(1)
}
}
</style>

Настройка CSS стилей прелоадера

body .block-loading {
background-color:#fff; - цвет фона перед загрузкой прелоадера.
.block-elements .full-elements{
background-color:#000; - цвет элементов прелоадера.

Установка HTML кода прелоадера

Установите код прелоадера сразу после тега <body>.

<div class="block-loading">
<div class="block-loading-inner">
<div class="block-elements">
<div class="full-elements elements1"></div>
<div class="full-elements elements2"></div>
<div class="full-elements elements3"></div>
</div>
</div>
</div>

Установка JS скрипта прелоадера

Установите скрипт прелоадера перед закрывающим тегом </body>.

<script>
jQuery(window).load(function() {
$(".loaded").fadeOut();
$(".block-loading").delay(600).fadeOut("slow");
});
</script>

Демо прелоадера Bounce

В предоставленном демо прелоадера Bounce можно редактировать HTML код, для просмотра CSS анимации удалите скрипт из демо примера.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.


Рейтинг: 4.5/5 из 2



Добавлено Автор Ник Источник Просмотров Комментариев Теги
06-10-2015 Михаил Меренков aTmpl © 408 0 индикатор css, прелоадер css, индикатор загрузки