Подробное описание и демонстрацией работы эффекта загрузки под номером №220 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 220
<div class="preloader"> <div class="preloader-inner"> <div class="preloader-inner nested1"> <div class="preloader-inner nested2"> <div class="preloader-inner nested3"> <div class="preloader-inner nested4"> <div class="preloader-inner nested5"> </div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.preloader{
height: 90px;
width: 90px;
margin: 0 auto;
position: relative;
}
.preloader-inner{
background: radial-gradient(#e74c3c,#d62717);
width: 20px;
height: 20px;
margin: auto;
border-radius: 20%;
position: absolute;
top: 0;
left: 0;
animation: moveit 3s linear infinite;
}
.nested1{ background: radial-gradient(#ff7f50,#ff6348); }
.nested2{ background: radial-gradient(#1dd1a1,#10ac84); }
.nested3{ background: radial-gradient(#5f27cd,#341f97); }
.nested4{ background: radial-gradient(#ff9ff3,#f368e0); }
.nested5{ background: radial-gradient(#c8d6e5,#8395a7); }
@keyframes moveit{
0%{
left: 0px;
top: 0px;
}
25%{
left: 70px;
top: 0px;
}
50%{
left: 70px;
top: 70px;
}
75%{
left: 0px;
top: 70px;
}
100%{
top: -70px;
top: 0px;
transform: rotate(360deg);
}
}