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

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

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

.loader{
width: 100px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner{
-webkit-animation: loading-1 1s infinite;
animation: loading-1 1s infinite;
}
.loader .box-1{
width: 100px;
height: 200px;
border-radius: 50px;
background: #f7557f;
-webkit-animation: loading-2 1s infinite;
animation: loading-2 1s infinite;
}
.loader .box-2{
width: 10px;
height: 20px;
border-radius: 50%;
background: #1f0242;
position: absolute;
top: 45px;
-webkit-animation: loading-3 6s infinite;
animation: loading-3 6s infinite;
}
.loader .box-2:nth-child(even){ left: 30px; }
.loader .box-2:nth-child(odd){ right: 30px; }
.loader .box-3{
width: 40px;
height: 20px;
background: #1f0242;
border: 3px solid #1f0242;
border-radius: 0 0 40px 40px;
overflow: hidden;
position: absolute;
top: 85px;
left: 27px;
z-index: 1;
}
.loader .box-3:before{
content: "";
display: block;
width: 40px;
height: 20px;
border-radius: 50%;
background: #ffb436;
position: absolute;
top: 10px;
left: 0;
}
.loader .box-4{
width: 100px;
height: 20px;
border-radius: 50%;
background: rgba(42,51,59,0.2);
position: absolute;
bottom: -10px;
z-index: -1;
-webkit-animation: loading-4 1s infinite;
animation: loading-4 1s infinite;
}
@-webkit-keyframes loading-1{
0%{
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
70%{
-webkit-transform: scale(1.02, 0.9) translateY(10px);
transform: scale(1.02, 0.9) translateY(10px);
}
100%{
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@keyframes loading-1{
0%{
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
70%{
-webkit-transform: scale(1.02, 0.9) translateY(10px);
transform: scale(1.02, 0.9) translateY(10px);
}
100%{
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@-webkit-keyframes loading-2{
0%{
border-radius: 50px;
}
70%{
border-radius: 50px 50px 40px 40px;
}
100%{
border-radius: 50px;
}
}
@keyframes loading-2{
0%{
border-radius: 50px;
}
70%{
border-radius: 50px 50px 40px 40px;
}
100%{
border-radius: 50px;
}
}
@-webkit-keyframes loading-3{
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
2%{
-webkit-transform: scale(2, 0.2);
transform: scale(2, 0.2);
}
4%{
-webkit-transform: scale(1);
transform: scale(1);
}
6%{
-webkit-transform: scale(2, 0.2);
transform: scale(2, 0.2);
}
8%{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loading-3{
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
2%{
-webkit-transform: scale(2, 0.2);
transform: scale(2, 0.2);
}
4%{
-webkit-transform: scale(1);
transform: scale(1);
}
6%{
-webkit-transform: scale(2, 0.2);
transform: scale(2, 0.2);
}
8%{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes loading-4{
0%{
-webkit-transform: scaleX(0.9);
transform: scaleX(0.9);
}
70%{
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100%{
-webkit-transform: scaleX(0.9);
transform: scaleX(0.9);
}
}
@keyframes loading-4{
0%{
-webkit-transform: scaleX(0.9);
transform: scaleX(0.9);
}
70%{
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100%{
-webkit-transform: scaleX(0.9);
transform: scaleX(0.9);
}
}

Теги: