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

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

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

N
I
A
R
Y
R
E
U
Q
J
html разметка для реализации эффекта загрузки тсраницы

<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="loader">
<div class="purple">N</div>
<div class="purple">I</div>
<div class="purple">A</div>
<div class="purple">R</div>
<div class="pink">Y</div>
<div class="pink">R</div>
<div class="pink">E</div>
<div class="pink">U</div>
<div class="pink">Q</div>
<div class="pink">J</div>
</div>
</div>
</div>
</div>

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

.loader {
position:relative;
height:36px;
overflow: hidden;
margin: 20px 0;
}
.loader div {
position:absolute;
width:20px;
height:36px;
font-size: 15px;
opacity:0;
font-family: Arial, sans-serif;
animation:loading 2s linear infinite;
-o-animation:loading 2s linear infinite;
-moz-animation:loading 2s linear infinite;
-webkit-animation:loading 2s linear infinite;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
.pink{
color: #dc005a;
}
.purple{
color: #7a4b94;
}
.loader div:nth-child(1) {
animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
.loader div:nth-child(2) {
animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.loader div:nth-child(3) {
animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.loader div:nth-child(4) {
animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.loader div:nth-child(5) {
animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.loader div:nth-child(6) {
animation-delay: 0.6s;
-o-animation-delay:0.6s;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.loader div:nth-child(7) {
animation-delay: 0.7s;
-o-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.loader div:nth-child(8) {
animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.loader div:nth-child(9) {
animation-delay: 0.9s;
-o-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.loader div:nth-child(10) {
animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
@keyframes loading {
0% {
left:0;
opacity:0;
}
35% {
left: 41%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-moz-keyframes loading {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-webkit-keyframes loading {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-o-keyframes loading {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}



Теги:
0

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

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