Установка прелоадера 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 анимации удалите скрипт из демо примера.
► Нажмите на значёк 
в редакторе для показа результата.