Подробное описание и демонстрацией работы эффекта загрузки под номером №130 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 130
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #000f2b; }
.loader{
width: 120px;
height: 120px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: loading-1;
animation-duration: 0.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.loader .loader-inner div{
width: 10px;
height: 10px;
border-radius: 50%;
margin: auto;
border: 1px solid #f6844e;
position: absolute;
top: 2px;
left: 0;
bottom: 0;
right: 0;
}
.loader .loader-inner div:nth-child(odd){
border-top: none;
border-left: none;
}
.loader .loader-inner div:nth-child(even){
border-bottom: none;
border-right: none;
}
.loader .loader-inner div:nth-child(2){
width: 14px;
height: 14px;
border-width: 2px;
top: -4px;
left: 0;
}
.loader .loader-inner div:nth-child(3){
width: 20px;
height: 20px;
border-width: 2px;
top: 3px;
left: -1px;
}
.loader .loader-inner div:nth-child(4){
width: 25px;
height: 25px;
border-width: 3px;
top: -4px;
left: -1px;
}
.loader .loader-inner div:nth-child(5){
width: 33px;
height: 33px;
border-width: 3px;
top: 4px;
left: -1px;
}
.loader .loader-inner div:nth-child(6){
width: 41px;
height: 41px;
border-width: 4px;
top: -4px;
left: 0;
}
.loader .loader-inner div:nth-child(7){
width: 51px;
height: 51px;
border-width: 4px;
top: 6px;
left: 0;
}
@-webkit-keyframes loading-1{
from{
-webkit-transform: rotate(360deg);
}
to{
-webkit-transform: rotate(0deg);
}
}
@keyframes loading-1{
from{
transform: rotate(360deg);
}
to{
transform: rotate(0deg);
}
}