Подробное описание и демонстрацией работы эффекта загрузки под номером №134 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 134
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner box-6"></div> <div class="loader-inner box-5"></div> <div class="loader-inner box-4"></div> <div class="loader-inner box-3"></div> <div class="loader-inner box-2"></div> <div class="loader-inner box-1"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки страницы
.loader{
width: 120px;
height: 120px;
margin: 70px auto;
position: relative;
animation: loading-1 linear 3.2s infinite;
}
.loader .loader-inner{
position: absolute;
}
.loader .loader-inner:before,
.loader .loader-inner:after{
content: "";
position: absolute;
width: 100%;
height: 50%;
background: #ee1524;
}
.loader .loader-inner:before{
top: 0;
border-radius: 999px 999px 0 0;
animation: loading-2 ease 0.8s alternate infinite;
}
.loader .loader-inner:after{
bottom: 0;
border-radius: 0 0 999px 999px;
animation: loading-3 ease 0.8s alternate infinite;
background: #45ae2a;
}
.loader .box-1{
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loader .box-2{
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
.loader .box-3{
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
}
.loader .box-4{
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
}
.loader .box-5{
top: 40px;
left: 40px;
bottom: 40px;
right: 40px;
}
.loader .box-6{
top: 50px;
left: 50px;
bottom: 50px;
right: 50px;
}
.loader .box-2:before,
.loader .box-2:after{
background: #faebd7;
animation-delay: 50ms;
}
.loader .box-3:before,
.loader .box-3:after{
animation-delay: 100ms;
}
.loader .box-4:before,
.loader .box-4:after{
background: #faebd7;
animation-delay: 150ms;
}
.loader .box-5:before,
.loader .box-5:after{
animation-delay: 200ms;
}
.loader .box-6:before,
.loader .box-6:after{
background: #69674f;
box-shadow: 0 0 50px #69674f;
animation: none;
}
@-webkit-keyframes loading-1{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
@keyframes loading-1{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
@-webkit-keyframes loading-2{
from{ top: 0; }
to{ top: -60%; }
}
@keyframes loading-2{
from{ top: 0; }
to{ top: -60%; }
}
@-webkit-keyframes loading-3{
from{ bottom: 0; }
to{ bottom: -60%; }
}
@keyframes loading-3{
from{ bottom: 0; }
to{ bottom: -60%; }
}