Подробное описание и демонстрацией работы эффекта загрузки под номером №42 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 42
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span></span><span></span><span></span><span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
text-align: center;
margin: 40px 0;
}
.loader span{
width: 20px;
height: 20px;
border-radius: 50%;
background: #f7bd3a;
display: inline-block;
}
.loader span:first-child{
animation: loading-2 0.5s linear infinite;
opacity: 0;
transform: translate(-20px);
}
.loader span:nth-child(2),
.loader span:nth-child(3){
animation: loading-3 0.5s linear infinite;
}
.loader span:last-child{
animation: loading-1 0.5s linear infinite;
}
@-webkit-keyframes loading-1{
100%{
transform:translate(40px);
opacity: 0;
}
}
@keyframes loading-1{
100%{
transform:translate(40px);
opacity: 0;
}
}
@-webkit-keyframes loading-2{
100%{
transform:translate(20px);
opacity: 1;
}
}
@keyframes loading-2{
100%{
transform:translate(20px);
opacity: 1;
}
}
@-webkit-keyframes loading-3{
100%{
transform:translate(20px);
}
}
@keyframes loading-3{
100%{
transform:translate(20px);
}
}