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

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

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

<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
</div>
</div>
</div>
</div>
</div>

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

.demo{ background: #6a4c93; }
.loader{
width: 150px;
height: 150px;
margin: 50px auto;
position: relative;
-webkit-animation: loading-1 6900ms cubic-bezier(0,0,0) infinite;
animation: loading-1 6900ms cubic-bezier(0,0,0) infinite;
}
.loader .loader-inner{
width: 19px;
height: 19px;
background: #8ac926;
border-radius: 50%;
margin: -10px 0 0 -10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-animation: loading-2 1725ms cubic-bezier(.7,.05,.39,.88) infinite;
animation: loading-2 1725ms cubic-bezier(.7,.05,.39,.88) infinite;
}
.loader .loader-inner:nth-child(1){
transform: translateY(-39px);
}
.loader .loader-inner:nth-child(2){
transform: translate(-19px, -19px);
animation-name: loading-3;
}
.loader .loader-inner:nth-child(3){
transform: translate(19px, -19px);
animation-name: loading-8;
}
.loader .loader-inner:nth-child(4){
transform: translate(-39px, 0);
animation-name: loading-4;
}
.loader .loader-inner:nth-child(5){
transform: translate(0, 0);
animation-name: none;
}
.loader .loader-inner:nth-child(6){
transform: translate(39px, 0);
animation-name: loading-5;
}
.loader .loader-inner:nth-child(7){
transform: translate(-19px, 19px);
animation-name: loading-9;
}
.loader .loader-inner:nth-child(8){
transform: translate(19px, 19px);
animation-name: loading-6;
}
.loader .loader-inner:nth-child(9){
transform: translate(0, 39px);
animation-name: loading-7;
}
@-webkit-keyframes loading-1{
0%,15%{
-webkit-transform: rotateZ(0deg);
}
25%,40%{
-webkit-transform: rotateZ(90deg);
}
50%,65%{
-webkit-transform: rotateZ(180deg);
}
75%,90%{
-webkit-transform: rotateZ(270deg);
}
100%{
-webkit-transform: rotateZ(360deg);
}
}
@keyframes loading-1{
0%,15%{
transform: rotateZ(0deg);
}
25%,40%{
transform: rotateZ(90deg);
}
50%,65%{
transform: rotateZ(180deg);
}
75%,90%{
transform: rotateZ(270deg);
}
100%{
transform: rotateZ(360deg);
}
}
@-webkit-keyframes loading-2{
0%{
-webkit-transform: translateX(0) translateY(-39px);
}
10%,20%{
-webkit-transform: translateX(19px) translateY(-19px);
}
30%,50%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-2{
0%{
transform: translateX(0) translateY(-39px);
}
10%,20%{
transform: translateX(19px) translateY(-19px);
}
30%,50%{
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes loading-3{
0%{
-webkit-transform: translateX(-19px) translateY(-19px);
}
10%,55%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-3{
0%{
transform: translateX(-19px) translateY(-19px);
}
10%,55%{
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes loading-4{
0%{
-webkit-transform: translateX(-39px) translateY(0px);
}
10%,30%{
-webkit-transform: translateX(-19px) translateY(19px);
}
40%,65%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-4{
0%{
transform: translateX(-39px) translateY(0px);
}
10%,30%{
transform: translateX(-19px) translateY(19px);
}
40%,65%{
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes loading-5{
0%,10%{
-webkit-transform: translateX(39px) translateY(0px);
}
20%{
-webkit-transform: translateX(19px) translateY(-19px);
}
30%,70%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-5{
0%,10%{
transform: translateX(39px) translateY(0px);
}
20%{
transform: translateX(19px) translateY(-19px);
}
30%,70%{
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes loading-6{
0%,10%{
-webkit-transform: translateX(19px) translateY(19px);
}
20%,80%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-6{
0%,10%{
transform: translateX(19px) translateY(19px);
}
20%,80%{
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes loading-7{
0%,10%{
-webkit-transform: translateX(0px) translateY(39px);
}
20%,30%{
-webkit-transform: translateX(-19px) translateY(19px);
}
40%,85%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-7{
0%,10%{
transform: translateX(0px) translateY(39px);
}
20%,30%{
transform: translateX(-19px) translateY(19px);
}
40%,85%{
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes loading-8{
0%,20%{
-webkit-transform: translateX(19px) translateY(-19px);
}
30%,60%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-8{
0%,20%{
transform: translateX(19px) translateY(-19px);
}
30%,60%{
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes loading-9{
0%,30%{
-webkit-transform: translateX(-19px) translateY(19px);
}
40%,75%{
-webkit-transform: translateX(0px) translateY(0px);
}
}
@keyframes loading-9{
0%,30%{
transform: translateX(-19px) translateY(19px);
}
40%,75%{
transform: translateX(0px) translateY(0px);
}
}

Теги: