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

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

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

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

<div class="demo">
<div class="loader">
<div class="loader-inner-1"></div>
<div class="loader-inner-2"></div>
</div>
</div>

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

.demo{ background: #174c62; }
.loader{
width: 19px;
height: 19px;
margin: 70px auto;
position: relative;
}
.loader .loader-inner-1{
width: 18px;
height: 18px;
border-radius: 50%;
background: #e0be29;
position: absolute;
top: 1px;
left: 1px;
animation: loading-1 2.88s 0s infinite both;
}
.loader .loader-inner-2{
width: 19px;
height: 19px;
border-radius: 50%;
background: #e0be29;
position: absolute;
animation: loading-2 2.88s 0s infinite both;
}
@keyframes loading-1{
0%,100%{
box-shadow: 0 0 0 #e0be29,
0 0 0 #e0be29,
0 0 0 #e0be29,
0 0 0 #e0be29,
0 0 0 #e0be29,
0 0 0 #e0be29,
0 0 0 #e0be29,
0 0 0 #e0be29;
}
50%{
transform: rotate(180deg);
}
25%,75%{
box-shadow: 27px 0 0 #e0be29, -27px 0 0 #e0be29, 0 27px 0 #e0be29, 0 -27px 0 #e0be29, 19px -19px 0 #e0be29, 19px 19px 0 #e0be29, -19px -19px 0 #e0be29, -19px 19px 0 #e0be29;
}
100%{
transform: rotate(360deg);
box-shadow: 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29;
}
}
@keyframes loading-2{
0%,100%{
box-shadow: 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29;
}
50%{
transform: rotate(-180deg);
}
25%,75%{
box-shadow: 51px 0 0 #e0be29, -51px 0 0 #e0be29, 0 51px 0 #e0be29, 0 -51px 0 #e0be29, 37px -37px 0 #e0be29, 37px 37px 0 #e0be29, -37px -37px 0 #e0be29, -37px 37px 0 #e0be29;
background: transparent;
}
100%{
transform: rotate(-360deg);
box-shadow: 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29;
}
}



Теги:
0

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

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