Подробное описание и демонстрацией работы эффекта загрузки под номером №221 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 221
<div class="preloader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.preloader{
margin: 50px auto;
text-align: center;
--n: 5;
}
.dot{
background: #e74c3c;
--i: 0;
}
.dot:nth-child(2){
background: #2ecc71;
--i: 1;
}
.dot:nth-child(3){
background: #3498db;
--i: 2;
}
.dot:nth-child(4){
background: #e67e22;
--i: 3;
}
.dot:nth-child(5){
background: #9b59b6;
--i: 4;
}
.dot:after{
--o: 1;
background: #fff;
content: "";
}
.dot, .dot:after {
display: inline-block;
width: 3em;
height: 3em;
border-radius: 50%;
animation: effect 1.5s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1.5s) infinite;
}
@keyframes effect{
0%, 50%{ transform: scale(0); }
}