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

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

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

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

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

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

.loader{
width: 80px;
display: flex;
justify-content: center;
overflow: hidden;
margin: 40px auto;
}
.loader .loader-inner{
width: 10px;
height: 20px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.3);
box-shadow: -15px 0 0 rgba(0, 0, 0, 0.3), -30px 0 0 rgba(0, 0, 0, 0.3), 15px 0 0 rgba(0, 0, 0, 0.3), 30px 0 0 rgba(0, 0, 0, 0.3);
}
.loader .box{
position: relative;
width: 100%;
height: 100%;
background-color: #f7eac8;
box-shadow: -15px 0 0 #f7eac8, 15px 0 0 #f7eac8;
animation: loading 1s steps(7, end) infinite;
}
@-webkit-keyframes loading{
0% {
transform: translatex(-45px);
}
100% {
transform: translatex(60px);
}
}
@keyframes loading{
0% {
transform: translatex(-45px);
}
100% {
transform: translatex(60px);
}
}



Теги:
0

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

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