Подробное описание и демонстрацией работы эффекта загрузки под номером №181 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 181
<div class="loader"> <div class="loader-inner"> <div class="box blue"></div> <div class="box green"></div> <div class="box blue"></div> </div> <div class="loader-inner"> <div class="box green"></div> <div class="box white"></div> <div class="box green"></div> </div> <div class="loader-inner"> <div class="box blue"></div> <div class="box green"></div> <div class="box blue"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #1a1a1a; }
.loader{
width: 200px;
margin: 50px auto;
animation-name: loading-1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.loader .loader-inner{
text-align: center;
animation-name: loading-2;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.loader .box{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
margin: 0 3px;
animation-name: loading-1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.loader .box.white{ background: #fff; }
.loader .box.green{ background: #759f00; }
.loader .box.blue{ background: #0077ae; }
@keyframes loading-1{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
@keyframes loading-2{
from{ transform: rotate(0deg); }
to{ transform: rotate(-360deg); }
}