Подробное описание и демонстрацией работы эффекта загрузки под номером №105 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 105
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 100px;
height: 70px;
margin: 50px auto;
position: relative;
}
.loader span{
display: block;
width: 5px;
height: 10px;
background: #e43632;
position: absolute;
bottom: 0;
animation: loading-1 2.25s infinite ease-in-out;
}
.loader span:nth-child(2){
left: 11px;
animation-delay: .2s;
}
.loader span:nth-child(3){
left: 22px;
animation-delay: .4s;
}
.loader span:nth-child(4){
left: 33px;
animation-delay: .6s;
}
.loader span:nth-child(5){
left: 44px;
animation-delay: .8s;
}
.loader span:nth-child(6){
left: 55px;
animation-delay: 1s;
}
.loader span:nth-child(7){
left: 66px;
animation-delay: 1.2s;
}
.loader span:nth-child(8){
left: 77px;
animation-delay: 1.4s;
}
.loader span:nth-child(9){
left: 88px;
animation-delay: 1.6s;
}
@-webkit-keyframes loading-1{
0%{
height: 10px;
transform: translateY(0px);
background: #ff4d80;
}
25%{
height: 60px;
transform: translateY(15px);
background: #3423a6;
}
50%{
height: 10px;
transform: translateY(-10px);
background: #e29013;
}
100%{
height: 10px;
transform: translateY(0px);
background: #e50926;
}
}
@keyframes loading-1{
0%{
height: 10px;
transform: translateY(0px);
background: #ff4d80;
}
25%{
height: 60px;
transform: translateY(15px);
background: #3423a6;
}
50%{
height: 10px;
transform: translateY(-10px);
background: #e29013;
}
100%{
height: 10px;
transform: translateY(0px);
background: #e50926;
}
}