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

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

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

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

<div id="second" class="loader">
<div class="loader-inner"></div>
<div class="loader-inner"></div>
</div>

<div id="third" class="loader">
<div class="loader-inner"></div>
<div class="loader-inner"></div>
</div>
</div>
</div>
</div>
</div>

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

.main-loader {
width: 148px;
height: 100px;
position: relative;
margin: 10px auto;
}
.loader {
width: 148px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.loader:after {
content: "";
width: 1em;
height: .25em;
border-radius: 50%;
position: absolute;
top: auto;
left: 0;
bottom: 0em;
display: block;
background-color: #9f5367;
opacity: 0.3;
animation: shadow 1.2s infinite linear;
-moz-animation: shadow 1.2s infinite linear;
}
.loader-inner,
.loader-inner:last-child {
width: 70px;
height: 70px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: roller 1.2s infinite linear;
-webkit-transform: rotate(135deg);
-moz-animation: roller 1.2s infinite linear;
-moz-transform: rotate(135deg);
animation: roller 1.2s infinite linear;
transform: rotate(135deg);
}
.loader-inner:last-child {
left: auto;
right: 0;
-webkit-transform: rotate(-45deg);
-webkit-animation: roller2 1.2s infinite linear;
-moz-transform: rotate(-45deg);
-moz-animation: roller2 1.2s infinite linear;
transform: rotate(-45deg);
animation: roller2 1.2s infinite linear;
}
.loader-inner:before,
.loader-inner:last-child:before {
content: "";
display: block;
width: 15px;
height: 15px;
background: #9F5367;
border-radius: 50%;
}
#second:after,
#second .loader-inner {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
#third:after,
#third .loader-inner {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes roller {
0% {
-webkit-transform: rotate(135deg);
}
8% {
-webkit-transform: rotate(240deg);
}
20% {
-webkit-transform: rotate(300deg);
}
40% {
-webkit-transform: rotate(380deg);
}
45% {
-webkit-transform: rotate(440deg);
}
50% {
-webkit-transform: rotate(495deg);
opacity: 1;
}
50.1% {
-webkit-transform: rotate(495deg);
opacity: 0;
}
100% {
-webkit-transform: rotate(495deg);
opacity: 0;
}
}
@-moz-keyframes roller {
0% {
-moz-transform: rotate(135deg);
}
8% {
-moz-transform: rotate(240deg);
}
20% {
-moz-transform: rotate(300deg);
}
40% {
-moz-transform: rotate(380deg);
}
45% {
-moz-transform: rotate(440deg);
}
50% {
-moz-transform: rotate(495deg);
opacity: 1;
}
50.1% {
-moz-transform: rotate(495deg);
opacity: 0;
}
100% {
-moz-transform: rotate(495deg);
opacity: 0;
}
}
@keyframes roller {
0% {
transform: rotate(135deg);
}
8% {
transform: rotate(240deg);
}
20% {
transform: rotate(300deg);
}
40% {
transform: rotate(380deg);
}
45% {
transform: rotate(440deg);
}
50% {
transform: rotate(495deg);
opacity: 1;
}
50.1% {
transform: rotate(495deg);
opacity: 0;
}
100% {
transform: rotate(495deg);
opacity: 0;
}
}
@-webkit-keyframes roller2 {
0% {
opacity: 0;
}
49.9% {
opacity: 0;
}
50% {
opacity: 1;
-webkit-transform: rotate(-45deg);
}
58% {
-webkit-transform: rotate(-160deg);
}
70% {
-webkit-transform: rotate(-240deg);
}
80% {
-webkit-transform: rotate(-300deg);
}
90% {
-webkit-transform: rotate(-340deg);
}
100% {
-webkit-transform: rotate(-405deg);
}
}
@-moz-keyframes roller2 {
0% {
opacity: 0;
}
49.9% {
opacity: 0;
}
50% {
opacity: 1;
-moz-transform: rotate(-45deg);
}
58% {
-moz-transform: rotate(-160deg);
}
70% {
-moz-transform: rotate(-240deg);
}
80% {
-moz-transform: rotate(-300deg);
}
90% {
-moz-transform: rotate(-340deg);
}
100% {
-moz-transform: rotate(-405deg);
}
}
@keyframes roller2 {
0% {
opacity: 0;
}
49.9% {
opacity: 0;
}
50% {
opacity: 1;
transform: rotate(-45deg);
}
58% {
transform: rotate(-160deg);
}
70% {
transform: rotate(-240deg);
}
80% {
transform: rotate(-300deg);
}
90% {
transform: rotate(-340deg);
}
100% {
transform: rotate(-405deg);
}
}
@-webkit-keyframes shadow {
0% {
opacity: .3;
-webkit-transform: translateX(65px) scale(0.5, 0.5);
}
8% {
-webkit-transform: translateX(30px) scale(2, 2);
}
13% {
-webkit-transform: translateX(0px) scale(1.3, 1.3);
}
30% {
-webkit-transform: translateX(-15px) scale(0.5, 0.5);
opacity: 0.1;
}
50% {
-webkit-transform: translateX(60px) scale(1.2, 1.2);
opacity: 0.3;
}
60% {
-webkit-transform: translateX(130px) scale(2, 2);
opacity: 0.05;
}
65% {
-webkit-transform: translateX(145px) scale(1.2, 1.2);
}
80% {
-webkit-transform: translateX(120px) scale(0.5, 0.5);
opacity: 0.1;
}
90% {
-webkit-transform: translateX(80px) scale(0.8, 0.8);
}
100% {
-webkit-transform: translateX(60px);
opacity: 0.3;
}
}
@-moz-keyframes shadow {
0% {
opacity: .3;
-moz-transform: translateX(65px) scale(0.5, 0.5);
}
8% {
-moz-transform: translateX(30px) scale(2, 2);
}
13% {
-moz-transform: translateX(0px) scale(1.3, 1.3);
}
30% {
-moz-transform: translateX(-15px) scale(0.5, 0.5);
opacity: 0.1;
}
50% {
-moz-transform: translateX(60px) scale(1.2, 1.2);
opacity: 0.3;
}
60% {
-moz-transform: translateX(130px) scale(2, 2);
opacity: 0.05;
}
65% {
-moz-transform: translateX(145px) scale(1.2, 1.2);
}
80% {
-moz-transform: translateX(120px) scale(0.5, 0.5);
opacity: 0.1;
}
90% {
-moz-transform: translateX(80px) scale(0.8, 0.8);
}
100% {
-moz-transform: translateX(60px);
opacity: 0.3;
}
}
@keyframes shadow {
0% {
opacity: .3;
transform: translateX(65px) scale(0.5, 0.5);
}
8% {
transform: translateX(30px) scale(2, 2);
}
13% {
transform: translateX(0px) scale(1.3, 1.3);
}
30% {
transform: translateX(-15px) scale(0.5, 0.5);
opacity: 0.1;
}
50% {
transform: translateX(60px) scale(1.2, 1.2);
opacity: 0.3;
}
60% {
transform: translateX(130px) scale(2, 2);
opacity: 0.05;
}
65% {
transform: translateX(145px) scale(1.2, 1.2);
}
80% {
transform: translateX(120px) scale(0.5, 0.5);
opacity: 0.1;
}
90% {
transform: translateX(80px) scale(0.8, 0.8);
}
100% {
transform: translateX(60px);
opacity: 0.3;
}
}

Теги: