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

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

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

<div class="demo" style="background:#6dc1b3;">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="box box-1">
<div class="loader-inner"></div>
</div>
<div class="box box-2">
<div class="loader-inner"></div>
</div>
<div class="box box-3">
<div class="loader-inner"></div>
</div>
<div class="box box-4">
<div class="loader-inner"></div>
</div>
<div class="box box-5">
<div class="loader-inner"></div>
</div>
</div>
</div>
</div>
</div>
</div>

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

.loader{
width: 96px;
height: 96px;
margin: 30px auto;
position: relative;
}
.loader .box{
width: 91px;
height: 91px;
position: absolute;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: loading 7.15s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: loading 7.15s infinite;
-o-transform: rotate(225deg);
-o-animation: loading 7.15s infinite;
-ms-transform: rotate(225deg);
-ms-animation: loading 7.15s infinite;
}
.loader .box-1{
-moz-animation-delay: 1.56s;
-webkit-animation-delay: 1.56s;
-o-animation-delay: 1.56s;
-ms-animation-delay: 1.56s;
}
.loader .box-2{
-moz-animation-delay: 0.31s;
-webkit-animation-delay: 0.31s;
-o-animation-delay: 0.31s;
-ms-animation-delay: 0.31s;
}
.loader .box-3{
-moz-animation-delay: 0.62s;
-webkit-animation-delay: 0.62s;
-o-animation-delay: 0.62s;
-ms-animation-delay: 0.62s;
}
.loader .box-4{
-moz-animation-delay: 0.94s;
-webkit-animation-delay: 0.94s;
-o-animation-delay: 0.94s;
-ms-animation-delay: 0.94s;
}
.loader .box-5{
-moz-animation-delay: 1.25s;
-webkit-animation-delay: 1.25s;
-o-animation-delay: 1.25s;
-ms-animation-delay: 1.25s;
}
.loader .loader-inner{
width: 12px;
height: 12px;
background: #fff;
position: absolute;
top: 0;
left: 0;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
}
@-moz-keyframes loading{
0% {
opacity: 1;
z-index: 99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin: 0%;
}
30% {
opacity: 1;
-moz-transform: rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin: 7%;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin: 30%;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin: 39%;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin: 70%;
}
76% {
opacity: 0;
-moz-transform: rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
@-webkit-keyframes loading {
0% {
opacity: 1;
z-index: 99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin: 0%;
}
30% {
opacity: 1;
-webkit-transform: rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin: 7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin: 30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin: 39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin: 70%;
}
76% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
@-o-keyframes loading {
0% {
opacity: 1;
z-index: 99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin: 0%;
}
30% {
opacity: 1;
-o-transform: rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin: 7%;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin: 30%;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin: 39%;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin: 70%;
}
76% {
opacity: 0;
-o-transform: rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}
@-ms-keyframes loading {
0% {
opacity: 1;
z-index: 99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin: 0%;
}
30% {
opacity: 1;
-ms-transform: rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin: 7%;
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin: 30%;
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin: 39%;
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin: 70%;
}
76% {
opacity: 0;
-ms-transform: rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}

Теги: