Preloader для сайта — стиль 26

Подробное описание и демонстрацией работы эффекта загрузки под номером №26 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

Демонстрация эффекта загрузки страницы — стиль 26

html разметка для реализации эффекта загрузки тсраницы

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
</div>
</div>
</div>
</div>

css разметка для реализации эффекта загрузки тсраницы

.loader{
width: 70px;
height: 40px;
margin: 30px auto;
}
.loader > div{
width: 5px;
height: 5px;
float: left;
background: #d3b142;
margin-right: 1px;
display: inline-block;
position: relative;
bottom: 0;
margin-top: 35px;
-webkit-animation: loading 1.5s infinite ease-in-out;
-moz-animation: loading 1.5s infinite ease-in-out;
-o-animation: loading 1.5s infinite ease-in-out;
animation: loading 1.5s infinite ease-in-out;
}
.loader .box1 {
-webkit-animation-delay: -1.5s;
-moz-animation-delay: -1.5s;
-o-animation-delay: -1.5s;
animation-delay: -1.5s;
}
.loader .box2 {
-webkit-animation-delay: -1.4s;
-moz-animation-delay: -1.4s;
-o-animation-delay: -1.4s;
animation-delay: -1.4s;
}
.loader .box3 {
-webkit-animation-delay: -1.3s;
-moz-animation-delay: -1.3s;
-o-animation-delay: -1.3s;
animation-delay: -1.3s;
}
.loader .box4 {
-webkit-animation-delay: -1.2s;
-moz-animation-delay: -1.2s;
-o-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.loader .box5 {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.loader .box6 {
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-o-animation-delay: -1s;
animation-delay: -1s;
}
.loader .box7 {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.loader .box8 {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.loader .box9 {
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.loader .box10 {
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
animation-delay: -0.6s;
}
@-webkit-keyframes loading {
50% {
height: 100%;
margin-top: 0;
background: #ef5ee5;
}
}
@-moz-keyframes loading {
50% {
height: 100%;
margin-top: 0;
background: #ef5ee5;
}
}
@-o-keyframes loading {
50% {
height: 100%;
margin-top: 0;
background: #ef5ee5;
}
}
@keyframes loading {
50% {
height: 100%;
margin-top: 0;
background: #ef5ee5;
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *