Подробное описание и демонстрацией работы эффекта загрузки под номером №95 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 95
<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{
width: 42px;
height: 42px;
margin: 70px auto;
position: relative;
-webkit-animation: loading-1 3s infinite linear;
animation: loading-1 3s infinite linear;
}
.loader span{
display: block;
width: 20px;
height: 20px;
border-radius: 20px;
position: absolute;
-webkit-animation: loading-2 1.5s infinite linear;
animation: loading-2 1.5s infinite linear;
}
.loader span:nth-child(1){
top: -11px;
left: -11px;
background: #2979ff;
}
.loader span:nth-child(2){
top: -11px;
left: 11px;
background: #ff1744;
}
.loader span:nth-child(3){
top: 11px;
left: -11px;
background: #00e676;
}
.loader span:nth-child(4){
top: 11px;
left: 11px;
background: #ffea00;
}
@-webkit-keyframes loading-1{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes loading-1{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes loading-2{
50% {
top: 0; left: 0;
opacity: 0.5;
}
60% { background: #fff; }
}
@keyframes loading-2{
50% {
top: 0; left: 0;
opacity: 0.5;
}
60% { background: #fff; }
}