Preloader для сайта — стиль 33

Подробное описание и демонстрацией работы эффекта загрузки под номером №33 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

html разметка для реализации эффекта загрузки тсраницы

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<span class="loader-inner"></span>
<ol class="box">
<li class="box-1"></li>
<li class="box-2"></li>
<li class="box-3"></li>
</ol>
</div>
</div>
</div>
</div>

css разметка для реализации эффекта загрузки тсраницы

.loader {
position: relative;
height: 100px;
}
.loader-inner {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #fff;
margin-top: -16px;
margin-left: -16px;
}
.box{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 50%;
left: 50%;
width: 117px;
margin-left: -17px;
margin-top: -17px;
-webkit-animation: box 2s infinite alternate ease-in-out;
animation: box 2s infinite alternate ease-in-out;
}
.box li{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 8px;
}
.box-1{
-webkit-animation: box-1 2s infinite alternate ease-in-out;
animation: box-1 2s infinite alternate ease-in-out;
}
.box-2{
-webkit-animation: box-2 2s infinite alternate ease-in-out;
animation: box-2 2s infinite alternate ease-in-out;
}
.box-3{
-webkit-animation: box-3 2s infinite alternate ease-in-out;
animation: box-3 2s infinite alternate ease-in-out;
}
@-webkit-keyframes box {
from {
margin-left: -17px;
}
20% {
margin-left: -17px;
}
40% {
margin-left: -57.33px;
}
60% {
margin-left: -57.33px;
}
80% {
margin-left: -97.66px;
}
to {
margin-left: -97.66px;
}
}
@keyframes box {
from {
margin-left: -17px;
}
20% {
margin-left: -17px;
}
40% {
margin-left: -57.33px;
}
60% {
margin-left: -57.33px;
}
80% {
margin-left: -97.66px;
}
to {
margin-left: -97.66px;
}
}
@-webkit-keyframes box-1 {
from {
background-color: #fff;
}
20% {
background-color: #fff;
}
40% {
background-color: rgba(255, 255, 255, 0.5);
}
to {
background-color: rgba(255, 255, 255, 0.5);
}
}
@keyframes box-1 {
from {
background-color: #fff;
}
20% {
background-color: #fff;
}
40% {
background-color: rgba(255, 255, 255, 0.5);
}
to {
background-color: rgba(255, 255, 255, 0.5);
}
}
@-webkit-keyframes box-2 {
from {
background-color: rgba(255, 255, 255, 0.5);
}
20% {
background-color: rgba(255, 255, 255, 0.5);
}
40% {
background-color: #fff;
}
60% {
background-color: #fff;
}
80% {
background-color: rgba(255, 255, 255, 0.5);
}
to {
background-color: rgba(255, 255, 255, 0.5);
}
}
@keyframes box-2 {
from {
background-color: rgba(255, 255, 255, 0.5);
}
20% {
background-color: rgba(255, 255, 255, 0.5);
}
40% {
background-color: #fff;
}
60% {
background-color: #fff;
}
80% {
background-color: rgba(255, 255, 255, 0.5);
}
to {
background-color: rgba(255, 255, 255, 0.5);
}
}
@-webkit-keyframes box-3 {
from {
background-color: rgba(255, 255, 255, 0.5);
}
60% {
background-color: rgba(255, 255, 255, 0.5);
}
80% {
background-color: #fff;
}
to {
background-color: #fff;
}
}
@keyframes box-3 {
from {
background-color: rgba(255, 255, 255, 0.5);
}
60% {
background-color: rgba(255, 255, 255, 0.5);
}
80% {
background-color: #fff;
}
to {
background-color: #fff;
}
}

Теги: