Подробное описание и демонстрацией работы эффекта загрузки под номером №136 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 136
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 68px;
height: 68px;
margin: 50px auto;
}
.loader .loader-inner{
display: inline-block;
width: 19px;
height: 19px;
background: #ed254e;
position: relative;
transition: all 0.92s;
animation: loading-1 5.75s linear infinite;
}
.loader .loader-inner:nth-child(1){
animation-delay: 3.45s;
}
.loader .loader-inner:nth-child(2){
animation-delay: 1.73s;
animation: loading-1 13.8s linear infinite;
}
.loader .loader-inner:nth-child(3){
animation-delay: 2.3s;
}
.loader .loader-inner:nth-child(4){
animation-delay: 0.23s;
}
.loader .loader-inner:nth-child(5){
animation-delay: 4.6s;
}
.loader .loader-inner:nth-child(6){
animation-delay: 2.3s;
animation: loading-1 8.05s linear infinite;
}
.loader .loader-inner:nth-child(7){
animation-delay: 0.46s;
}
.loader .loader-inner:nth-child(8){
animation-delay: 1.73s;
animation: loading-1 6.9s linear infinite;
}
.loader .loader-inner:nth-child(9){
animation-delay: 28.75s;
animation: loading-1 9.2s linear infinite;
}
@-webkit-keyframes loading-1{
0%{
-webkit-transform: none;
}
20%{
-webkit-transform: rotateZ(-90deg) rotateY(180deg);
}
40%{
background: #1c3d7f;
-webkit-transform: none;
}
60%{
background: rgb(255,255,255);
}
80%{
background: #fcab10;
}
90%{
-webkit-transform: none;
background: #63b931;
}
}
@keyframes loading-1{
0%{
transform: none;
}
20%{
transform: rotateZ(-90deg) rotateY(180deg);
}
40%{
background: #1c3d7f;
transform: none;
}
60%{
background: rgb(255,255,255);
}
80%{
background: #fcab10;
}
90%{
transform: none;
background: #63b931;
}
}