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

Подробное описание и демонстрацией работы эффекта загрузки под номером №71 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner-1"></div>
<div class="loader-inner-2"></div>
<div class="loader-inner-3"></div>
<div class="loader-inner-4"></div>
<div class="loader-inner-5"></div>
<div class="loader-inner-6"></div>
<div class="loader-inner-7"></div>
<div class="loader-inner-8"></div>
<div class="loader-inner-9"></div>
<div class="loader-inner-10"></div>
</div>
</div>
</div>
</div>

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

.loader{
width: 60px;
height: 30px;
margin: 70px auto;
}
.loader > div{
width: 5px;
height: 100%;
float: left;
background: #d2d927;
margin-right: 1px;
display: inline-block;
-webkit-animation: loading 1.5s infinite ease-in-out;
-moz-animation: loading 1.5s infinite ease-in-out;
-o-animation: loading 1.5s infinite ease-in-out;
animation: loading 1.5s infinite ease-in-out;
-webkit-transform: scaleY(0.05) translateX(-5px);
-moz-transform: scaleY(0.05) translateX(-5px);
-ms-transform: scaleY(0.05) translateX(-5px);
-o-transform: scaleY(0.05) translateX(-5px);
transform: scaleY(0.05) translateX(-5px);
}
.loader .loader-inner-1{
-webkit-animation-delay: 0.05s;
-moz-animation-delay: 0.05s;
-o-animation-delay: 0.05s;
animation-delay: 0.05s;
}
.loader .loader-inner-2{
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader .loader-inner-3{
-webkit-animation-delay: 0.15s;
-moz-animation-delay: 0.15s;
-o-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.loader .loader-inner-4{
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader-inner-5{
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-o-animation-delay: 0.25s;
animation-delay: 0.25s;
}
.loader .loader-inner-6{
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader .loader-inner-7{
-webkit-animation-delay: 0.35s;
-moz-animation-delay: 0.35s;
-o-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.loader .loader-inner-8{
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.loader .loader-inner-9{
-webkit-animation-delay: 0.45s;
-moz-animation-delay: 0.45s;
-o-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.loader .loader-inner-10{
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes loading{
10% {
background: #dd4d7a;
}
15% {
-webkit-transform: scaleY(1.2) translateX(10px);
-moz-transform: scaleY(1.2) translateX(10px);
-ms-transform: scaleY(1.2) translateX(10px);
-o-transform: scaleY(1.2) translateX(10px);
transform: scaleY(1.2) translateX(10px);
background: #dd4d7a;
}
90%, 100% {
-webkit-transform: scaleY(0.05) translateX(-5px);
-moz-transform: scaleY(0.05) translateX(-5px);
-ms-transform: scaleY(0.05) translateX(-5px);
-o-transform: scaleY(0.05) translateX(-5px);
transform: scaleY(0.05) translateX(-5px);
}
}
@-moz-keyframes loading{
10% {
background: #dd4d7a;
}
15% {
-webkit-transform: scaleY(1.2) translateX(10px);
-moz-transform: scaleY(1.2) translateX(10px);
-ms-transform: scaleY(1.2) translateX(10px);
-o-transform: scaleY(1.2) translateX(10px);
transform: scaleY(1.2) translateX(10px);
background:#dd4d7a;
}
90%, 100% {
-webkit-transform: scaleY(0.05) translateX(-5px);
-moz-transform: scaleY(0.05) translateX(-5px);
-ms-transform: scaleY(0.05) translateX(-5px);
-o-transform: scaleY(0.05) translateX(-5px);
transform: scaleY(0.05) translateX(-5px);
}
}
@-o-keyframes loading{
10% {
background: #dd4d7a;
}
15% {
-webkit-transform: scaleY(1.2) translateX(10px);
-moz-transform: scaleY(1.2) translateX(10px);
-ms-transform: scaleY(1.2) translateX(10px);
-o-transform: scaleY(1.2) translateX(10px);
transform: scaleY(1.2) translateX(10px);
background:#dd4d7a;
}
90%, 100% {
-webkit-transform: scaleY(0.05) translateX(-5px);
-moz-transform: scaleY(0.05) translateX(-5px);
-ms-transform: scaleY(0.05) translateX(-5px);
-o-transform: scaleY(0.05) translateX(-5px);
transform: scaleY(0.05) translateX(-5px);
}
}
@keyframes loading{
10% {
background: #dd4d7a;
}
15% {
-webkit-transform: scaleY(1.2) translateX(10px);
-moz-transform: scaleY(1.2) translateX(10px);
-ms-transform: scaleY(1.2) translateX(10px);
-o-transform: scaleY(1.2) translateX(10px);
transform: scaleY(1.2) translateX(10px);
background: #dd4d7a;
}
90%, 100% {
-webkit-transform: scaleY(0.05) translateX(-5px);
-moz-transform: scaleY(0.05) translateX(-5px);
-ms-transform: scaleY(0.05) translateX(-5px);
-o-transform: scaleY(0.05) translateX(-5px);
transform: scaleY(0.05) translateX(-5px);
}
}

Теги: