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

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

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

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

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

.loader {
display: block;
margin: 30px auto;
position: relative;
width: 100px;
height: 100px;
}
.loader span {
display: block;
position: absolute;
width: 50%;
height: 50%;
}
.loader span:nth-child(1) {
top: 0;
left: 0;
background-color: #f38630;
-webkit-animation: loading1 2s linear infinite;
animation: loading1 2s linear infinite;
}
.loader span:nth-child(2) {
top: 0;
right: 0;
background: #588c73;
-webkit-animation: loading2 2s linear infinite;
animation: loading2 2s linear infinite;
}
.loader span:nth-child(3) {
bottom: 0;
left: 0;
background: #9b539c;
-webkit-animation: loading3 2s linear infinite;
animation: loading3 2s linear infinite;
}
.loader span:nth-child(4) {
bottom: 0;
right: 0;
background: #d94e67;
-webkit-animation: loading4 2s linear infinite;
animation: loading4 2s linear infinite;
}
@-webkit-keyframes loading1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
z-index: 10;
}
25% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
50% {
-webkit-transform: translate(100%, 100%);
transform: translate(100%, 100%);
}
75% {
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
z-index: 0;
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes loading1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
z-index: 10;
}
25% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
50% {
-webkit-transform: translate(100%, 100%);
transform: translate(100%, 100%);
}
75% {
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
z-index: 0;
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@-webkit-keyframes loading2 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
25% {
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
50% {
-webkit-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
z-index: 0;
}
75% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
z-index: 10;
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes loading2 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
25% {
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
50% {
-webkit-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
z-index: 0;
}
75% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
z-index: 10;
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@-webkit-keyframes loading3 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
25% {
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
z-index: 10;
}
50% {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
}
75% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
z-index: 0;
}
}
@keyframes loading3 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
25% {
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
z-index: 10;
}
50% {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
}
75% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
z-index: 0;
}
}
@-webkit-keyframes loading4 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
25% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
z-index: 0;
}
50% {
-webkit-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
z-index: 10;
}
75% {
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes loading4 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
25% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
z-index: 0;
}
50% {
-webkit-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
z-index: 10;
}
75% {
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}

Теги: