Подробное описание и демонстрацией работы эффекта загрузки под номером №214 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 214
<div class="preloader"> <div class="loader loader-inner-1"> <div class="loader loader-inner-2"> <div class="loader loader-inner-3"> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.preloader{
height: 100%;
width: 100%;
padding: 20px 0 20px;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
align-items: center;
perspective: 700;
}
.loader{
text-align: center;
margin: 5px;
border-radius: 50%;
border: 4px solid #fff;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
align-items: center;
transform-style: preserve-3d;
position: relative;
}
.loader-inner-1{
animation-delay: 0.2s;
animation: change_first_circle 2s ease-in-out infinite;
}
.loader-inner-2{
animation-delay: 0.2s;
animation: change_second_circle 2s ease-in-out infinite;
}
.loader-inner-3{
animation-delay: 0.2s;
width: 100px;
height: 100px;
animation: change_last_circle 3s linear infinite;
}
@keyframes change_first_circle {
50%{ transform: rotateX(360deg) scale(0.8); }
}
@keyframes change_second_circle {
50%{ transform: rotateY(360deg) scale(0.8); }
}
@keyframes change_last_circle {
50%{ transform: rotateX(360deg) scale(0.8); }
}