Подробное описание и демонстрацией работы эффекта загрузки под номером №168 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 168
<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 разметка для реализации эффекта загрузки тсраницы
.loader{
width: 400px;
height: 100px;
margin: 70px auto;
perspective: 300px;
perspective-origin: 50% 50%;
position: relative;
}
.loader .loader-inner{
width: 20%;
height: 100%;
box-sizing: border-box;
position: absolute;
left: 0;
transform-origin: 0% 50%;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.loader .loader-inner:nth-child(1){
background: #853aff;
left: 0;
z-index: 1;
animation-name: loading-1;
}
.loader .loader-inner:nth-child(2){
background: #f1a94e;
left: 20%;
z-index: 2;
animation-name: loading-2;
}
.loader .loader-inner:nth-child(3){
background: #e45641;
left: 40%;
z-index: 3;
animation-name: loading-3;
}
.loader .loader-inner:nth-child(4){
background: #38040e;
left: 60%;
z-index: 4;
animation-name: loading-4;
}
.loader .loader-inner:nth-child(5){
background: #b1ff16;
left: 80%;
z-index: 5;
animation-name: loading-5;
}
@keyframes loading-1{
0%{
transform: rotateY(-180deg);
opacity: 0;
transform-origin: 0% 50%;
background-color:#853AFF;
}
4%{
background: #853aff;
}
5%{
background: #b1ff16;
}
10%{
transform: rotateY(0deg);
opacity: 1;
background: #b1ff16;
transform-origin: 0% 50%;
}
11%{
transform-origin: 100% 50%;
background: #853aff;
}
48%{
z-index: 1;
}
49%{
z-index: 10;
}
50%{
transform: rotateY(0deg);
}
51%{
transform-origin: 100% 50%;
}
60%{
transform: rotateY(180deg);
opacity: 1;
background: #853aff;
}
61%{
opacity: 0;
}
100%{
z-index: 10;
transform: rotateY(180deg);
opacity: 0;
transform-origin: 100% 50%;
background: #853aff;
}
}
@keyframes loading-2{
0%{
transform: rotateY(-180deg);
background: #b1ff16;
opacity: 0;
transform-origin: 0% 50%;
}
9%{
opacity: 0;
}
10%{
transform: rotateY(-180deg);
opacity: 1;
}
15%{
background: #b1ff16;
}
20% {
background: #b1ff16;
transform: rotateY(0deg);
transform-origin: 0% 50%;
}
21%{
transform-origin: 100% 50%;
background: #fcab10;
}
48%{
z-index: 2;
}
49%{
z-index: 9;
}
60%{
opacity: 1;
transform: rotateY(0deg);
background: #fcab10;
}
61%{
background: #853aff;
transform-origin: 100% 50%;
}
64%{
background: #853aff;
}
65%{
background: #fcab10;
}
70%{
transform: rotateY(180deg);
opacity: 1;
}
71%{
opacity: 0;
}
100%{
z-index: 9;
background: #fcab10;
transform: rotateY(180deg);
opacity: 0;
transform-origin: 100% 50%;
}
}
@keyframes loading-3{
0%{
transform: rotateY(-180deg);
background: #b1ff16;
opacity: 0;
transform-origin: 0% 50%;
}
19%{
opacity: 0;
}
20%{
transform: rotateY(-180deg);
opacity: 1;
}
25%{
background: #b1ff16;
}
30%{
background: #b1ff16;
transform: rotateY(0deg);
transform-origin: 0% 50%;
}
31%{
transform-origin: 100% 50%;
background: #fe2712;
}
48%{
z-index: 3;
}
49%{
z-index: 8;
}
70%{
transform: rotateY(0deg);
opacity: 1;
background: #fe2712;
}
71%{
background: #fcab10;
transform-origin: 100% 50%;
}
74%{
background: #fcab10;
}
75%{
background: #fe2712;
}
80%{
transform: rotateY(180deg);
opacity: 1;
}
81%{
opacity: 0;
}
100%{
z-index: 8;
background: #fe2712;
transform: rotateY(180deg);
opacity: 0;
transform-origin: 100% 50%;
}
}
@keyframes loading-4{
0%{
transform: rotateY(-180deg);
background: #b1ff16;
opacity: 0;
transform-origin: 0% 50%;
}
29%{
opacity: 0;
}
30%{
transform: rotateY(-180deg);
opacity: 1;
}
35%{
background: #b1ff16;
}
40%{
background: #b1ff16;
transform: rotateY(0deg);
transform-origin: 0% 50%;
}
41%{
transform-origin: 100% 50%;
background: #38040E;
}
48%{
z-index: 4;
}
49%{
z-index: 7;
}
80%{
transform: rotateY(0deg);
opacity: 1;
background: #38040e;
}
81%{
background: #fe2712;
transform-origin: 100% 50%;
}
84%{
background: #fe2712;
}
85%{
background: #38040e;
}
90%{
transform: rotateY(180deg);
opacity: 1;
}
91%{
opacity: 0;
}
100%{
z-index: 7;
background: #38040e;
transform: rotateY(180deg);
opacity: 0;
transform-origin: 100% 50%;
}
}
@keyframes loading-5{
0%{
transform: rotateY(-180deg);
background: #b1ff16;
opacity: 0;
transform-origin: 0% 50%;
}
39%{
opacity: 0;
}
40%{
transform: rotateY(-180deg);
opacity: 1;
}
45%{
background: #b1ff16;
}
48%{
z-index: 5;
}
49%{
z-index: 6;
}
50%{
background: #b1ff16;
transform: rotateY(0deg);
transform-origin: 0% 50%;
}
51%{
transform-origin: 100% 50%;
background: #b1ff16;
}
90%{
transform: rotateY(0deg);
opacity: 1;
background: #b1ff16;
}
91%{
background: #38040e;
transform-origin: 100% 50%;
}
94%{
background: #38040e;
}
95%{
background: #b1ff16;
}
100%{
z-index: 6;
background: #b1ff16;
transform: rotateY(180deg);
opacity: 0;
transform-origin: 100% 50%;
}
}
@media only screen and (max-width: 480px){
.loader{
width: 300px;
height: 70px;
}
}
@media only screen and (max-width: 360px){
.loader{
width: 200px;
height: 50px;
}
}