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

Подробное описание и демонстрацией работы эффекта загрузки под номером №152 для бибилиотеки 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 class="loader-inner"></div>
</div>
</div>
</div>
</div>

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

.loader{
width: 320px;
height: 128px;
margin: 40px auto;
position: relative;
}
.loader .loader-inner{
width: 64px;
height: 128px;
border-radius: 6px;
margin-left: -32px;
position: absolute;
left: 50%;
transform-origin: center;
}
.loader .loader-inner:nth-child(1){
background: #119da4;
z-index: 9;
animation: loading-1 1.9s ease-out infinite;
}
.loader .loader-inner:nth-child(2){
background: #ffc63a;
z-index: 8;
animation: loading-2 1.9s ease-out infinite;
}
.loader .loader-inner:nth-child(3){
background: #ff0000;
z-index: 7;
animation: loading-3 1.9s ease-out infinite;
}
.loader .loader-inner:nth-child(4){
background: #00d33f;
z-index: 6;
animation: loading-4 1.9s ease-out infinite;
}
.loader .loader-inner:nth-child(5){
background: #124e78;
z-index: 5;
animation: loading-5 1.9s ease-out infinite;
}
.loader .loader-inner:nth-child(6){
background: #ea2f6c;
z-index: 4;
animation: loading-6 1.9s ease-out infinite;
}
@keyframes loading-1{
0%{
transform: translateX(0) rotate(0deg);
}
15%{
transform: translateX(10em) rotate(90deg);
}
35%{
transform: translateX(-10em) rotate(270deg);
}
55%{
transform: translateX(0) rotate(360deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}
@keyframes loading-2{
0%{
transform: translateX(0) rotate(0deg);
}
16%{
transform: translateX(8.33333em) rotate(90deg);
}
38%{
transform: translateX(-8.33333em) rotate(270deg);
}
60%{
transform: translateX(0) rotate(360deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}
@keyframes loading-3{
0%{
transform: translateX(0) rotate(0deg);
}
17%{
transform: translateX(6.66667em) rotate(90deg);
}
41%{
transform: translateX(-6.66667em) rotate(270deg);
}
65%{
transform: translateX(0) rotate(360deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}
@keyframes loading-4{
0%{
transform: translateX(0) rotate(0deg);
}
18%{
transform: translateX(5em) rotate(90deg);
}
44%{
transform: translateX(-5em) rotate(270deg);
}
70%{
transform: translateX(0) rotate(360deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}
@keyframes loading-5{
0%{
transform: translateX(0) rotate(0deg);
}
19%{
transform: translateX(3.33333em) rotate(90deg);
}
47%{
transform: translateX(-3.33333em) rotate(270deg);
}
75%{
transform: translateX(0) rotate(360deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}
@keyframes loading-6{
0%{
transform: translateX(0) rotate(0deg);
}
20%{
transform: translateX(1.66667em) rotate(90deg);
}
50%{
transform: translateX(-1.66667em) rotate(270deg);
}
80%{
transform: translateX(0) rotate(360deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}

Теги: