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

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

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

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

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

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

.demo{ background-color: #ea2a3d; }
.preloader{
display: flex;
justify-content: center;
align-items: center;
margin-top: 25px;
}
.loader{
background-color: #c0b283;
width: 12em;
height: 12em;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
position: relative;
animation: bottom-ripple 1s ease-in-out infinite -50ms;
}
.loader::before,
.loader::after {
content: "";
border-radius: inherit;
box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
position: absolute;
left: 50%;
top: 50%;
}
.loader::before{
background-color: #dcd0c0;
height: 8em;
width: 8em;
margin: -4em 0 0 -4em;
animation: middle-ripple 1s ease-in-out infinite -25ms;
}
.loader::after{
background-color: #f4f4f4;
height: 4em;
width: 4em;
margin: -2em 0 0 -2em;
animation: top-ripple 1s ease-in-out infinite;
}
@keyframes bottom-ripple{
0%{
box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
transform: scale(1);
}
50%{
box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
transform: scale(1.25);
}
}
@keyframes middle-ripple{
0%{
box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
transform: scale(1);
}
50%{
box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
transform: scale(1.1);
}
}
@keyframes top-ripple{
0%{
box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
transform: scale(1);
}
50%{
box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
transform: scale(1.4);
}
}



Теги:
0

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

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