Подробное описание и демонстрацией работы эффекта загрузки под номером №219 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 219
<div class="preloader"> <div class="spinner"></div> <div class="spinner-2"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.preloader{
position: relative;
height: 75px;
width: 75px;
margin: 50px auto 0;
}
.spinner{
width: 75px;
height: 75px;
margin: 0;
border-top: 10px solid #ff3f34;
box-shadow: 4px 4px 5px #d2d2d2 inset;
border-right: 10px solid transparent;
border-radius: 50%;
animation: 1.5s spin linear infinite;
}
.spinner-2{
width: 75px;
height: 75px;
margin: 0;
border-top: 10px solid #0fbcf9;
border-left: 10px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
animation: 1.5s spin-2 linear infinite;
}
@keyframes spin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
@keyframes spin-2{
from{ transform: rotate(360deg); }
to{ transform: rotate(0deg); }
}