Подробное описание и демонстрацией работы эффекта загрузки под номером №120 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 120
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <div class="box-4"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 65px;
height: 65px;
margin: 70px auto;
position: relative;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.loader .box-1,
.loader .box-2,
.loader .box-3,
.loader .box-4{
width: 10px;
height: 60px;
background: #f2545b;
border-radius: 4px;
float: left;
margin-left: 5px;
}
.loader .box-1{
-webkit-animation: loading-1 0.2s linear infinite alternate;
animation: loading-1 0.2s linear infinite alternate;
}
.loader .box-2{
-webkit-animation: loading-1 0.4s linear infinite alternate;
animation: loading-1 0.4s linear infinite alternate;
}
.loader .box-3{
-webkit-animation: loading-1 0.6s linear infinite alternate;
animation: loading-1 0.6s linear infinite alternate;
}
.loader .box-4{
-webkit-animation: loading-1 0.8s linear infinite alternate;
animation: loading-1 0.8s linear infinite alternate;
}
@-webkit-keyframes loading-1{
0%{ height: 15px; }
100%{ height: 60px; }
}
@keyframes loading-1{
0%{ height: 15px; }
100%{ height: 60px; }
}