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

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

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

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

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

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

.loader {
display: table;
border: 3px solid #222;
padding: 5px;
margin: 50px auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.loader:after {
content: "";
display: block;
width: 7px;
height: 15px;
background: #222;
position: absolute;
right: -7px;
}
.loader .loader-inner {
display: block;
width: 15px;
height: 15px;
float: left;
background-color: #222;
filter: alpha(opacity=0);
opacity: 0;
animation: _fade 0.5s 2s infinite alternate forwards;
}
.loader .loader-inner:not(:last-child) {
margin-right: 5px;
}
.loader .loader-inner:first-child {
animation-delay: 0.2s;
}
.loader .loader-inner:nth-child(2) {
animation-delay: 0.4s;
}
.loader .loader-inner:last-child {
animation-delay: 0.6s;
}
@keyframes _fade {
from {
filter: alpha(opacity=0);
opacity: 0;
}
to {
filter: alpha(opacity=100);
opacity: 1;
}
}



Теги:
0

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

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