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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>

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

.loader{
width: 300px;
height: 150px;
position: relative;
margin: 30px auto 0;
}
.loader div{
position: absolute;
left: 50%;
width: 21px;
height: 21px;
border-radius: 50%;
background: #f8acbe;
margin-top: 50px;
animation: loading 2.1s linear infinite;
}
.loader div:nth-child(1){
animation-delay: -0.7s;
}
.loader div:nth-child(2){
animation-delay: -1.4s;
}
@-webkit-keyframes loading{
0% {
transform: translateX(0px) translateY(0px);
}
12.5% {
transform: translateX(27.5px) translateY(-57px) scale(1.1);
background: #f8acbe;
}
25% {
transform: translateX(55px) translateY(0px);
animation-timing-function: ease-out;
}
37.5% {
transform: translateX(27.5px) translateY(57px);
}
50% {
transform: translateX(0px) translateY(0px);
}
62.5% {
transform: translateX(-27.5px) translateY(-57px) scale(1.1);
animation-timing-function: ease-in;
}
75% {
transform: translateX(-55px) translateY(0px);
animation-timing-function: ease-out;
}
87.5% {
transform: translateX(-27.5px) translateY(57px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}
@keyframes loading{
0% {
transform: translateX(0px) translateY(0px);
}
12.5% {
transform: translateX(27.5px) translateY(-57px) scale(1.1);
background: #f8acbe;
}
25% {
transform: translateX(55px) translateY(0px);
animation-timing-function: ease-out;
}
37.5% {
transform: translateX(27.5px) translateY(57px);
}
50% {
transform: translateX(0px) translateY(0px);
}
62.5% {
transform: translateX(-27.5px) translateY(-57px) scale(1.1);
animation-timing-function: ease-in;
}
75% {
transform: translateX(-55px) translateY(0px);
animation-timing-function: ease-out;
}
87.5% {
transform: translateX(-27.5px) translateY(57px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}

Теги: