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

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

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

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

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

.loader{
width: 20px;
height: 20px;
margin: 100px auto;
transform-origin: center;
animation: loading-1 1s ease-in-out infinite;
}
.loader span,
.loader span:before,
.loader span:after{
content: "";
display: inline-block;;
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
.loader span:before{
transform: translate(0,-20px) scale(0.75);
}
.loader span:after{
transform: translate(0,-35px) scale(0.5);
}
.loader span:nth-child(1){
transform: translate(0,50px);
}
.loader span:nth-child(1),
.loader span:nth-child(1):before,
.loader span:nth-child(1):after{
background: #dc005a;
}
.loader span:nth-child(2),
.loader span:nth-child(2):before,
.loader span:nth-child(2):after{
background: #7a4b94;
}
.loader span:nth-child(2){
transform: rotate(90deg) translate(0,50px);
}
.loader span:nth-child(3),
.loader span:nth-child(3):before,
.loader span:nth-child(3):after{
background: #26a4d9;
}
.loader span:nth-child(3){
transform: rotate(180deg) translate(0,50px);
}
.loader span:nth-child(4),
.loader span:nth-child(4):before,
.loader span:nth-child(4):after{
background: #8ca865;
}
.loader span:nth-child(4){
transform: rotate(270deg) translate(0,50px);
}
@-webkit-keyframes loading-1{
80%,100%{
transform: rotate(360deg);
}
}
@keyframes loading-1{
80%,100%{
transform: rotate(360deg);
}
}

Теги: