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

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

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

.demo{ background: #465775; }
.loader{
width: 400px;
height: 250px;
background: #fff;
margin: 0 auto;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-webkit-filter: contrast(80);
filter: contrast(80);
}
.loader .loader-inner{
width: 50px;
height: 50px;
border-radius: 50%;
background: #821e82;
position: relative;
margin: 0 auto;
-webkit-transform: translateY(60px);
transform: translateY(60px);
-webkit-filter: blur(8px);
filter: blur(8px);
}
.loader .loader-inner:before,
.loader .loader-inner:after{
content: "";
width: inherit;
height: inherit;
border-radius: inherit;
background-color: inherit;
position: absolute;
}
.loader .loader-inner:before{
-webkit-filter: blur(15px);
filter: blur(15px);
-webkit-animation: loading-1 1.5s infinite ease-in-out alternate;
animation: loading-1 1.5s infinite ease-in-out alternate;
}
.loader .loader-inner:after{
-webkit-filter: blur(8px);
filter: blur(8px);
-webkit-transform: translateY(80px);
transform: translateY(80px);
}
@-webkit-keyframes loading-1{
0%,5%{
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
95%,100%{
-webkit-transform: translateY(75px);
transform: translateY(75px);
}
}
@keyframes loading-1{
0%,5%{
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
95%,100%{
-webkit-transform: translateY(75px);
transform: translateY(75px);
}
}
@media only screen and (max-width: 479px){
.loader{ width: 280px; }
}

Теги: