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

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

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

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

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

.demo{ background: #2d3d48; }
.loader{
width: 270px;
height: 50px;
margin: 70px auto;
position: relative;
}
.loader .loader-inner{
width: 25px;
height: 25px;
position: absolute;
top: 20%;
-webkit-animation: loading-1 1s infinite ease-in-out;
animation: loading-1 1s infinite ease-in-out;
}
.loader .loader-inner:nth-child(1){
background: #d3aecf;
left: 40px;
z-index: 1;
-webkit-animation: loading-2 1s infinite ease-in-out;
animation: loading-2 1s infinite ease-in-out;
}
.loader .loader-inner:nth-child(2){
background: #758fea;
left: 80px;
z-index: 2;
-webkit-animation: loading-3 1s infinite ease-in-out;
animation: loading-3 1s infinite ease-in-out;
}
.loader .loader-inner:nth-child(3){
background: #91da5f;
left: 120px;
z-index: 5;
-webkit-animation: loading-4 1s infinite ease-in-out;
animation: loading-4 1s infinite ease-in-out;
}
.loader .loader-inner:nth-child(4){
background: #266f64;
left: 160px;
z-index: 3;
-webkit-animation: loading-5 1s infinite ease-in-out;
animation: loading-5 1s infinite ease-in-out;
}
.loader .loader-inner:nth-child(5){
background: #b2e07b;
left: 200px;
z-index: 4;
-webkit-animation: loading-6 1s infinite ease-in-out;
animation: loading-6 1s infinite ease-in-out;
}
@-webkit-keyframes loading-1{
50%{ border-radius: 50%; }
}
@keyframes loading-1{
50%{ border-radius: 50%; }
}
@-webkit-keyframes loading-2{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(80px) translateY(-15px) rotate(360deg);
transform: translateX(80px) translateY(-15px) rotate(360deg);
}
}
@keyframes loading-2{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(80px) translateY(-15px) rotate(360deg);
transform: translateX(80px) translateY(-15px) rotate(360deg);
}
}
@-webkit-keyframes loading-3{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(40px) translateY(-15px) rotate(360deg);
transform: translateX(40px) translateY(-15px) rotate(360deg);
}
}
@keyframes loading-3{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(40px) translateY(-15px) rotate(360deg);
transform: translateX(40px) translateY(-15px) rotate(360deg);
}
}
@-webkit-keyframes loading-4{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateY(-15px) rotate(360deg);
transform: translateY(-15px) rotate(360deg);
}
}
@keyframes loading-4{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateY(-15px) rotate(360deg);
transform: translateY(-15px) rotate(360deg);
}
}
@-webkit-keyframes loading-5{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(-40px) translateY(-15px) rotate(360deg);
transform: translateX(-40px) translateY(-15px) rotate(360deg);
}
}
@keyframes loading-5{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(-40px) translateY(-15px) rotate(360deg);
transform: translateX(-40px) translateY(-15px) rotate(360deg);
}
}
@-webkit-keyframes loading-6{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(-80px) translateY(-15px) rotate(360deg);
transform: translateX(-80px) translateY(-15px) rotate(360deg);
}
}
@keyframes loading-6{
50%{
width: 55px;
height: 55px;
border-radius: 50%;
background: #d9d18e;
opacity: .5;
-webkit-transform: translateX(-80px) translateY(-15px) rotate(360deg);
transform: translateX(-80px) translateY(-15px) rotate(360deg);
}
}

Теги: