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

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

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

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

<div class="loader"></div>

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

.loader{
color: #3498db;
background: #e84393;
width: 40px;
height:80px;
margin: 40px auto 0;
position: relative;
animation: load1 1s infinite ease-in-out;
animation-delay: -0.16s;
}
.loader:before, .loader:after{
background: #e84393;
width: 40px;
height: 80px;
animation: load1 1s infinite ease-in-out;
}
.loader:before, .loader:after{
content: "";
position: absolute;
top: 0;
}
.loader:before{
left: -60px;
animation-delay: -0.32s;
}
.loader:after{ left: 60px; }
@keyframes load1{
0%,
80%,
100% {
box-shadow: 0 0;
height: 41px;
}
40% {
box-shadow: 0 -60px;
background: #c90a66;
height: 41px;
}
}



Теги:
0

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

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