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

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

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

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

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

.loader {
font-size: 20px;
margin: 100px auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear;
animation: load4 1.3s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em #fff, 2em -2em 0 0em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 0 #fff;
}
12.5% {
box-shadow: 0 -3em 0 0 #fff, 2em -2em 0 0.2em #fff, 3em 0 0 0 #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff;
}
25% {
box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 0 #fff, 3em 0 0 0.2em #fff, 2em 2em 0 0 #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff;
}
37.5% {
box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 0 #fff, 2em 2em 0 0.2em #fff, 0 3em 0 0em #fff, -2em 2em 0 -1em #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff;
}
50% {
box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 0em #fff, 0 3em 0 0.2em #fff, -2em 2em 0 0 #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff;
}
62.5% {
box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 0 #fff, -2em 2em 0 0.2em #fff, -3em 0 0 0 #fff, -2em -2em 0 -1em #fff;
}
75% {
box-shadow: 0em -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 0.2em #fff, -2em -2em 0 0 #fff;
}
87.5% {
box-shadow: 0em -3em 0 0 #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 0 #fff, -2em -2em 0 0.2em #fff;
}
}
@keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em #fff, 2em -2em 0 0em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 0 #fff;
}
12.5% {
box-shadow: 0 -3em 0 0 #fff, 2em -2em 0 0.2em #fff, 3em 0 0 0 #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff;
}
25% {
box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 0 #fff, 3em 0 0 0.2em #fff, 2em 2em 0 0 #fff, 0 3em 0 -1em #fff, -2em 2em 0 -1em #fff, -3em 0 0 -1em #fff, -2em -2em 0 -1em #fff;
}
37.5% {
box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 0 #fff, 2em 2em 0 0.2em #fff, 0 3em 0 0em #fff, -2em 2em 0 -1em #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff;
}
50% {
box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 0em #fff, 0 3em 0 0.2em #fff, -2em 2em 0 0 #fff, -3em 0em 0 -1em #fff, -2em -2em 0 -1em #fff;
}
62.5% {
box-shadow: 0 -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 0 #fff, -2em 2em 0 0.2em #fff, -3em 0 0 0 #fff, -2em -2em 0 -1em #fff;
}
75% {
box-shadow: 0em -3em 0 -1em #fff, 2em -2em 0 -1em #fff, 3em 0em 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 0.2em #fff, -2em -2em 0 0 #fff;
}
87.5% {
box-shadow: 0em -3em 0 0 #fff, 2em -2em 0 -1em #fff, 3em 0 0 -1em #fff, 2em 2em 0 -1em #fff, 0 3em 0 -1em #fff, -2em 2em 0 0 #fff, -3em 0em 0 0 #fff, -2em -2em 0 0.2em #fff;
}
}

Теги: