Подробное описание и демонстрацией работы эффекта загрузки под номером №211 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 211
<div class="preloader"> <div class="loader"></div> <div class="loader-inner"> <div class="loader-inner-1"></div> <div class="loader-inner-1"></div> <div class="loader-inner-1"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
:root{
--page-color: #fff;
--loader-color: #1B1464;
--loader-inner-color: radial-gradient(#A3CB38,#009432,#009432);
--loader-size: 20px;
--loader-inner-size: 35px;
}
.demo{
background-color: var(--page-color);
display: flex;
justify-content: center;
}
.preloader{
width: 100px;
height: 100px;
margin: 50px auto 0;
position: relative;
animation: rotate 4.8s linear infinite;
}
.loader{
width: 100%;
height: 100%;
border: var(--loader-size) solid var(--loader-color);
border-radius: 100%;
position: relative;
z-index: 2;
}
.loader-inner-1{
width: 80%;
height: 80%;
position: absolute;
top: -20%;
left: -20%;
}
.loader-inner-1:after{
content: '';
background: var(--loader-inner-color);
width: var(--loader-inner-size);
height: var(--loader-inner-size);
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
}
.loader-inner-1:nth-child(1){
animation: rotate 1.6s -0.5333333333s linear infinite, sphere-anim 1.6s -0.5333333333s linear infinite;
}
.loader-inner-1:nth-child(2){
animation: rotate 1.6s -1.0666666667s linear infinite, sphere-anim 1.6s -1.0666666667s linear infinite;
}
.loader-inner-1:nth-child(3){
animation: rotate 1.6s -1.6s linear infinite, sphere-anim 1.6s -1.6s linear infinite;
}
@keyframes rotate{
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
@keyframes sphere-anim{
from { z-index: 1; }
to { z-index: 2; }
}