Подробное описание и демонстрацией работы эффекта загрузки под номером №216 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 216
<div class="preloader"> <div class="main-circle"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.preloader{
width: 100px;
height: 100px;
margin: 30px auto 0;
}
.main-circle{
width: 50px;
height: 50px;
border-top: 50px solid #3429ad;
border-bottom: 50px solid #3429ad;
border-left: 50px solid #C4E538;
border-right: 50px solid #C4E538;
border-radius: 50%;
box-shadow: 0 0 0 3px #fff,0 0 10px #000;
animation: spin 6s linear infinite;
}
@keyframes spin{
0%{ transform: rotate(-360deg) scale(0); }
20%{ transform: rotate(360deg) scale(1); }
40%{ transform: rotate(-360deg) scale(0); }
60%{ transform: rotate(360deg) scale(1); }
100%{ transform: rotate(-360deg)scale(0); }
}