Подробное описание и демонстрацией работы эффекта загрузки под номером №169 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 169
<div class="loader"> <span class="loader-inner-1"></span> <span class="loader-inner-2"></span> <span class="loader-inner-3"></span> <span class="loader-inner-4"></span> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner-1,
.loader .loader-inner-2,
.loader .loader-inner-3,
.loader .loader-inner-4{
display: block;
width: 20px;
height: 20px;
border-radius: 20px;
position: absolute;
}
.loader .loader-inner-1:before,
.loader .loader-inner-2:before,
.loader .loader-inner-3:before,
.loader .loader-inner-4:before{
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 20px;
position: absolute;
right: 0;
animation-name: loading-1;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 2s;
}
.loader .loader-inner-1{
top: 0;
left: 0;
transform: rotate(70deg);
}
.loader .loader-inner-1:before{ background: #06aed5; }
.loader .loader-inner-2{
top: 0;
right: 0;
transform: rotate(160deg);
}
.loader .loader-inner-2:before{ background: #ec008c; }
.loader .loader-inner-3{
bottom: 0;
right: 0;
transform: rotate(-110deg);
}
.loader .loader-inner-3:before{ background: #ffbf00; }
.loader .loader-inner-4{
bottom: 0;
left: 0;
transform: rotate(-20deg);
}
.loader .loader-inner-4:before{ background: #079c00; }
@keyframes loading-1{
0%{
width: 20px;
right: 0;
}
30%{
width: 120px;
right: -100px;
}
60%{
width: 20px;
right: -100px;
}
}