Подробное описание и демонстрацией работы эффекта загрузки под номером №171 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 171
<div class="loader"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"></div> </div> </div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ overflow: hidden; }
.loader .loader-inner{
width: 260px;
height: 260px;
background: #77379a;
border-radius: 100% 0 100% 0;
padding: 15px;
margin: 64px auto;
box-sizing: border-box;
position: relative;
animation: loading-1 10s linear forwards infinite;
}
.loader .loader-inner:before{
content: "";
background: #fff;
border-radius: 0 100% 0 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loader .loader-inner > .loader-inner{
width: 100%;
height: 100%;
margin: 0;
}
@keyframes loading-1{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}