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

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

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

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

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

.loader {
width: 3.75em;
height: 4.25em;
margin: 30px auto;
position: relative;
font-size: 20px;
display: block;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotateY(180deg) rotateZ(-60deg);
transform: rotateY(180deg) rotateZ(-60deg);
}
.loader .loader-inner {
border-top: 1.125em solid transparent;
border-right: none;
border-bottom: 1em solid transparent;
border-left: 1.875em solid #b54173;
position: absolute;
top: 0px;
left: 50%;
border-radius: 3px 3px 0 0;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.loader .loader-inner:nth-child(1) {
-webkit-transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
}
.loader .loader-inner:nth-child(2) {
-webkit-transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
}
.loader .loader-inner:nth-child(3) {
-webkit-transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
}
.loader .loader-inner:nth-child(4) {
-webkit-transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
}
.loader .loader-inner:nth-child(5) {
-webkit-transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
}
.loader .loader-inner:nth-child(6) {
-webkit-transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
}
.loader.loading {
-webkit-animation: 2s loader-flip steps(2) infinite both;
animation: 2s loader-flip steps(2) infinite both;
}
.loader.loading .loader-inner:nth-child(1) {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s loader-cycle-1 linear infinite both;
animation: 2s loader-cycle-1 linear infinite both;
}
.loader.loading .loader-inner:nth-child(2) {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s loader-cycle-2 linear infinite both;
animation: 2s loader-cycle-2 linear infinite both;
}
.loader.loading .loader-inner:nth-child(3) {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s loader-cycle-3 linear infinite both;
animation: 2s loader-cycle-3 linear infinite both;
}
.loader.loading .loader-inner:nth-child(4) {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s loader-cycle-4 linear infinite both;
animation: 2s loader-cycle-4 linear infinite both;
}
.loader.loading .loader-inner:nth-child(5) {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s loader-cycle-5 linear infinite both;
animation: 2s loader-cycle-5 linear infinite both;
}
.loader.loading .loader-inner:nth-child(6) {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s loader-cycle-6 linear infinite both;
animation: 2s loader-cycle-6 linear infinite both;
}
@-webkit-keyframes loader-cycle-1 {
5% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
10%,
75% {
-webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
80%,
100% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@keyframes loader-cycle-1 {
5% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
10%,
75% {
-webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
80%,
100% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@-webkit-keyframes loader-cycle-2 {
10% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
15%,
70% {
-webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
75%,
100% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@keyframes loader-cycle-2 {
10% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
15%,
70% {
-webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
75%,
100% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@-webkit-keyframes loader-cycle-3 {
15% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
20%,
65% {
-webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
70%,
100% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@keyframes loader-cycle-3 {
15% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
20%,
65% {
-webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
70%,
100% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@-webkit-keyframes loader-cycle-4 {
20% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
25%,
60% {
-webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
65%,
100% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@keyframes loader-cycle-4 {
20% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
25%,
60% {
-webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
65%,
100% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@-webkit-keyframes loader-cycle-5 {
25% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
30%,
55% {
-webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
60%,
100% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@keyframes loader-cycle-5 {
25% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
30%,
55% {
-webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
60%,
100% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@-webkit-keyframes loader-cycle-6 {
30% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
35%,
50% {
-webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
55%,
100% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@keyframes loader-cycle-6 {
30% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
35%,
50% {
-webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
border-left-color: #b54173;
}
55%,
100% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #d7005a;
}
}
@-webkit-keyframes loader-flip {
0% {
-webkit-transform: rotateY(0deg) rotateZ(-60deg);
transform: rotateY(0deg) rotateZ(-60deg);
}
100% {
-webkit-transform: rotateY(360deg) rotateZ(-60deg);
transform: rotateY(360deg) rotateZ(-60deg);
}
}
@keyframes loader-flip {
0% {
-webkit-transform: rotateY(0deg) rotateZ(-60deg);
transform: rotateY(0deg) rotateZ(-60deg);
}
100% {
-webkit-transform: rotateY(360deg) rotateZ(-60deg);
transform: rotateY(360deg) rotateZ(-60deg);
}
}

Теги: