Подробное описание и демонстрацией работы эффекта загрузки под номером №208 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 208
<div id="loader"> <span class="loader loader-1"></span> <span class="loader loader-2"></span> <span class="loader loader-3"></span> <span class="loader loader-4"></span> </div>css разметка для реализации эффекта загрузки тсраницы
#loader {
height: 100px;
width: 260px;
margin: 70px auto 0;
position: relative;
}
.loader {
background: #ccc;
width: 40px;
height: 40px;
border-radius: 24px;
display: inline-block;
position: absolute;
}
.loader-1 {
animation: animateDot1 1.5s linear infinite;
left: 130px;
background: #f73138;
}
.loader-2 {
background: #00b733;
left: 60px;
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
}
.loader-3 {
background: #448afc;
left: 130px;
animation: animateDot3 1.5s linear infinite;
}
.loader-4 {
background: #950faf;
left: 60px;
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
}
@keyframes animateDot1 {
0%{ transform: rotate(0deg) translateX(-60px); }
25% { transform: rotate(180deg) translateX(-60px); }
75% { transform: rotate(180deg) translateX(-60px); }
100% { transform: rotate(360deg) translateX(-60px); }
}
@keyframes animateDot2 {
0%{ transform: rotate(-0deg) translateX(-70px); }
25% { transform: rotate(-180deg) translateX(-70px); }
75% { transform: rotate(-180deg) translateX(-70px); }
100% { transform: rotate(-360deg) translateX(-70px); }
}
@keyframes animateDot3 {
0%{ transform: rotate(0deg) translateX(60px); }
25% { transform: rotate(180deg) translateX(60px); }
75% { transform: rotate(180deg) translateX(60px); }
100% { transform: rotate(360deg) translateX(60px); }
}
@keyframes animateDot4 {
0%{ transform: rotate(-0deg) translateX(60px); }
25% { transform: rotate(-180deg) translateX(60px); }
75% { transform: rotate(-180deg) translateX(60px); }
100% { transform: rotate(-360deg) translateX(60px); }
}