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

Подробное описание и демонстрацией работы эффекта загрузки под номером №117 для бибилиотеки 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: 100px;
height: 100px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.loader span{
display: inline-block;
position: absolute;
animation-fill-mode: both;
animation: loading-1 9s cubic-bezier(.45,.05,.55,.95) infinite;
}
.loader span:nth-child(1){
background: #ff4b7d;
animation-name: loading-1;
}
.loader span:nth-child(2){
background: #3485ef;
animation-name: loading-2;
}
.loader span:nth-child(3){
background: #5fad56;
animation-name: loading-3;
}
.loader span:nth-child(4){
background: #e9573d;
animation-name: loading-4;
}
@keyframes loading-1{
0%{
width: 25%;
height: 25%;
border-radius: 100% 0 0 0;
background: #ff4b7d;
bottom: 50%;
left: 25%;
}
5%{
width: 25%;
height: 25%;
border-radius: 100% 0 0 0;
background: #ff4b7d;
bottom: 50%;
left: 25%;
}
10%{
width: 25%;
height: 25%;
border-radius: 100% 100% 0 0;
background: #ff4b7d;
bottom: 50%;
left: 25%;
}
13%{
width: 25%;
height: 25%;
border-radius: 100% 100% 0 0;
background: #5fad56;
bottom: 50%;
left: 12.5%;
}
18%{
width: 25%;
height: 25%;
border-radius: 100% 100% 0 0;
background: #5fad56;
bottom: 50%;
left: 12.5%;
}
20%{
width: 32.5%;
height: 32.5%;
border-radius: 50%;
background: #5fad56;
bottom: 50%;
left: 6.25%;
}
25%{
width: 25%;
height: 25%;
border-radius: 50%;
background: #3485ef;
bottom: 62.5%;
left: 12.5%;
}
30%{
width: 25%;
height: 25%;
border-radius: 50%;
background: #3485ef;
bottom: 62.5%;
left: 12.5%;
}
35%{
width: 14%;
height: 10%;
border-radius: 999px;
background: #ff4b7d;
left: 0%;
bottom: 0%;
}
40%{ height:100%; }
55%{ height: 10%; }
60%{ height:100%; }
70%{
width: 14%;
height: 25%;
border-radius: 999px;
background: #ff4b7d;
bottom: 0%;
left: 0%;
}
75%{
width: 25%;
height: 25%;
border-radius: 100%;
bottom: 57.5%;
left: 17.5%;
}
97%{
width: 25%;
height: 25%;
border-radius: 100%;
bottom: 57.5%;
left: 17.5%;
}
100%{
width: 50%;
height: 50%;
border-radius: 100%;
bottom: 25%;
left: 25%;
}
}
@keyframes loading-2{
0%{
width: 25%;
height: 25%;
background: #ff4b7d;
border-radius: 0 0 0 100%;
bottom: 25%;
left: 25%;
}
5%{
width: 25%;
height: 25%;
background: #ff4b7d;
border-radius: 0 0 0 100%;
bottom: 25%;
left: 25%;
}
10%{
width: 25%;
height: 25%;
background: #ff4b7d;
border-radius: 0 0 100% 100%;
bottom: 25%;
left: 25%;
}
13%{
width: 25%;
height: 25%;
background: #5fad56;
border-radius: 0 0 100% 100%;
bottom: 25%;
left: 12.5%;
}
18%{
width: 25%;
height: 25%;
background: #5fad56;
border-radius: 0 0 100% 100%;
bottom: 25%;
left: 12.5%;
}
20%{
width: 32.5%;
height: 32.5%;
background: #5fad56;
border-radius: 50%;
bottom: 25%;
left: 6.25%;
}
25%{
width: 25%;
height: 25%;
background: #3485ef;
border-radius: 50%;
bottom: 12.5%;
left: 12.5%;
}
30%{
left: 12.5%;
bottom: 12.5%;
border-radius: 50%;
height: 25%;
width: 25%;
background:#3485EF;
}
35%{
left: 28%;
bottom: 0%;
border-radius: 999px;
height: 10%;
width: 14%;
background:#3485EF;
}
40%{ height:10%; }
45%{ height:100%; }
60%{ height: 10%; }
65%{ height:100%; }
75%{
left: 28%;
bottom: 0%;
border-radius: 999px;
height: 25%;
width: 14%;
background:#3485EF;
}
80%{
left: 17.5%;
bottom: 17.5%;
border-radius: 100%;
height: 25%;
width: 25%;
}
97%{
left: 17.5%;
bottom: 17.5%;
border-radius: 100%;
height: 25%;
width: 25%;
box-shadow: none;
}
100%{
box-shadow: -3px -3px 5px -5px #3485EF;
border-radius: 100%;
left: 25%;
bottom: -50%;
height: 50%;
width: 50%;
}
}
@keyframes loading-3{
0%{
left: 50%;
bottom: 50%;
border-radius: 0 100% 0 0;
height: 25%;
width: 25%;
background:#FF4B7D;
}
5%{
left: 50%;
bottom: 50%;
border-radius: 0 100% 0 0;
height: 25%;
width: 25%;
background:#FF4B7D;
}
10%{
left: 50%;
bottom: 50%;
border-radius: 100% 100% 0 0;
height: 25%;
width: 25%;
background:#FF4B7D;
}
13%{
left: 62.5%;
bottom: 50%;
border-radius: 100% 100% 0 0;
height: 25%;
width: 25%;
background:#5FAD56;
}
18%{
left: 62.5%;
bottom: 50%;
border-radius: 100% 100% 0 0;
height: 25%;
width: 25%;
background:#5FAD56;
}
20%{
left: 66.25%;
bottom: 50%;
border-radius: 50%;
height: 32.5%;
width: 32.5%;
background: #5FAD56;
}
25%{
left: 62.5%;
bottom: 62.5%;
border-radius: 50%;
height: 25%;
width: 25%;
background:#3485EF;
}
30%{
left: 62.5%;
bottom: 62.5%;
border-radius: 50%;
height: 25%;
width: 25%;
background:#3485EF;
}
35%{
left: 56%;
bottom: 0%;
border-radius: 999px;
height: 10%;
width: 14%;
background:#5FAD56;
}
45%{ height:10%; }
50%{ height:100%; }
65%{ height: 10%; }
70%{ height:100%; }
80%{
left: 56%;
bottom: 0%;
border-radius: 999px;
height: 25%;
width: 14%;
background:#5FAD56;
}
85%{
left: 57.5%;
bottom: 57.5%;
border-radius: 100%;
height: 25%;
width: 25%;
}
97%{
left: 57.5%;
bottom: 57.5%;
border-radius: 100%;
height: 25%;
width: 25%;
box-shadow: none;
}
100%{
box-shadow: -3px -3px 5px -5px #5FAD56;
border-radius: 100%;
left: 100%;
bottom: 25%;
height: 50%;
width: 50%;
}
}
@keyframes loading-4{
0%{
left: 50%;
bottom: 25%;
border-radius: 0 0 100% 0;
height: 25%;
width: 25%;
background:#FF4B7D;
}
5%{
left: 50%;
bottom: 25%;
border-radius: 0 0 100% 0;
height: 25%;
width: 25%;
background:#FF4B7D;
}
10%{
left: 50%;
bottom: 25%;
border-radius: 0 0 100% 100%;
height: 25%;
width: 25%;
background:#FF4B7D;
}
13%{
left: 62.5%;
bottom: 25%;
border-radius: 0 0 100% 100%;
height: 25%;
width: 25%;
background:#5FAD56;
}
18%{
left: 62.5%;
bottom: 25%;
border-radius: 0 0 100% 100%;
height: 25%;
width: 25%;
background: #5FAD56;
}
20%{
left: 66.25%;
bottom: 25%;
border-radius: 50%;
height: 32.5%;
width: 32.5%;
background:#5FAD56;
}
25%{
left: 62.5%;
bottom: 12.5%;
border-radius: 50%;
height: 25%;
width: 25%;
background:#3485EF;
}
30%{
left: 62.5%;
bottom: 12.5%;
border-radius: 50%;
height: 25%;
width: 25%;
background:#3485EF;
}
35%{
left: 84%;
bottom: 0%;
border-radius: 999px;
height: 10%;
width: 14%;
background: #e9573d;
}
50%{ height:10%; }
55%{ height:100%; }
70%{ height: 10%; }
75%{ height:100%; }
85%{
left: 84%;
bottom: 0%;
border-radius: 999px;
height: 25%;
width: 14%;
background:#E9573D;
}
90%{
left: 57.5%;
bottom: 17.5%;
border-radius: 100%;
height: 25%;
width: 25%;
}
97%{
left: 57.5%;
bottom: 17.5%;
border-radius: 100%;
height: 25%;
width: 25%;
box-shadow: none;
}
100%{
box-shadow: -3px -3px 5px -5px #e9573d;
border-radius: 100%;
left: 100%;
bottom: -50%;
height: 50%;
width: 50%;
}
}

Теги: