Подробное описание и демонстрацией работы эффекта загрузки под номером №146 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 146
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> <div class="box-1"></div> </div> <div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> <div class="box-2"></div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #3d405b; }
.loader{
width: 195px;
height: 30px;
margin: 60px auto;
position: relative;
transform: rotate(180deg);
}
.loader .box-1,
.loader .box-2{
width: 15px;
height: 15px;
border-radius: 50%;
background: #f4d761;
position: absolute;
top: 0;
-webkit-animation: loading-1 0.46s ease infinite;
animation: loading-1 0.46s ease infinite;
}
.loader .box-2{
-webkit-animation: loading-2 0.46s ease infinite 3.45s, loading-3 1.15s ease forwards 5.75s;
animation: loading-2 0.46s ease infinite 3.45s, loading-3 1.15s ease forwards 5.75s;
}
.loader .box-1:nth-child(1){
left: 14.28571%;
animation-delay: 0.29s;
}
.loader .box-1:nth-child(2){
left: 28.57143%;
animation-delay: 0.58s;
}
.loader .box-1:nth-child(3){
left: 42.85714%;
animation-delay: 0.86s;
}
.loader .box-1:nth-child(4){
left: 57.14286%;
animation-delay: 1.15s;
}
.loader .box-1:nth-child(5){
left: 71.42857%;
animation-delay: 1.44s;
}
.loader .box-1:nth-child(6){
left: 85.71429%;
animation-delay: 1.73s;
}
.loader .box-1:nth-child(7){
left: 100%;
animation-delay: 2.01s;
}
.loader .box-2:nth-child(1){
left: 14.28571%;
animation-delay: 0.29s;
}
.loader .box-2:nth-child(2){
left: 28.57143%;
animation-delay: 0.58s;
}
.loader .box-2:nth-child(3){
left: 42.85714%;
animation-delay: 0.86s;
}
.loader .box-2:nth-child(4){
left: 57.14286%;
animation-delay: 1.15s;
}
.loader .box-2:nth-child(5){
left: 71.42857%;
animation-delay: 1.44s;
}
.loader .box-2:nth-child(6){
left: 85.71429%;
animation-delay: 1.73s;
}
.loader .box-2:nth-child(7){
left: 100%;
animation-delay: 2.01s;
}
@-webkit-keyframes loading-1{
from{ top: 0; }
to{
top: 39px;
transform: scale(0.75);
z-index: 1;
opacity: 0;
}
}
@keyframes loading-1{
from{ top: 0; }
to{
top: 39px;
transform: scale(0.75);
z-index: 1;
opacity: 0;
}
}
@-webkit-keyframes loading-2{
from{
top: 39px;
transform: scale(0.75);
z-index: 2;
}
to{ top: 0; }
}
@keyframes loading-2{
from{
top: 39px;
transform: scale(0.75);
z-index: 2;
}
to{ top: 0; }
}
@-webkit-keyframes loading-3{
from{ top: 0; }
to{ top: 0; }
}
@keyframes loading-3{
from{ top: 0; }
to{ top: 0; }
}