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

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

Демонстрация эффекта загрузки страницы — стиль 5

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

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

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

.loader {
font-size: 90px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease;
animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #fff, -0.087em -0.825em 0 -0.42em #fff, -0.173em -0.812em 0 -0.44em #fff, -0.256em -0.789em 0 -0.46em #fff, -0.297em -0.775em 0 -0.477em #fff;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #fff, -0.338em -0.758em 0 -0.42em #fff, -0.555em -0.617em 0 -0.44em #fff, -0.671em -0.488em 0 -0.46em #fff, -0.749em -0.34em 0 -0.477em #fff;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #fff, -0.377em -0.74em 0 -0.42em #fff, -0.645em -0.522em 0 -0.44em #fff, -0.775em -0.297em 0 -0.46em #fff, -0.82em -0.09em 0 -0.477em #fff;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff;
}
}
@keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #fff, -0.087em -0.825em 0 -0.42em #fff, -0.173em -0.812em 0 -0.44em #fff, -0.256em -0.789em 0 -0.46em #fff, -0.297em -0.775em 0 -0.477em #fff;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #fff, -0.338em -0.758em 0 -0.42em #fff, -0.555em -0.617em 0 -0.44em #fff, -0.671em -0.488em 0 -0.46em #fff, -0.749em -0.34em 0 -0.477em #fff;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #fff, -0.377em -0.74em 0 -0.42em #fff, -0.645em -0.522em 0 -0.44em #fff, -0.775em -0.297em 0 -0.46em #fff, -0.82em -0.09em 0 -0.477em #fff;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #fff, 0 -0.83em 0 -0.42em #fff, 0 -0.83em 0 -0.44em #fff, 0 -0.83em 0 -0.46em #fff, 0 -0.83em 0 -0.477em #fff;
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *