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

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

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

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

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css /> -->
<div id="loader-wrapper">
<div id="loader1" class="fas fa-cog loader"></div>
<div id="loader2" class="fas fa-cog loader"></div>
<div id="loader3" class="fas fa-cog loader"></div>
</div>

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

#loader-wrapper {
width: 60px;
height: 60px;
margin: auto;
position: relative;
}
.loader{ position: absolute; }
#loader1{
color: #3A4652;
font-size: 35px;
text-align: center;
width: 35px;
height: 35px;
top: -20px;
left: 3px;
animation: animate-1 1s infinite linear;
}
#loader2{
color: #d72f2b;
font-size: 50px;
text-align: center;
height: 50px;
width: 50px;
right: -12px;
animation: animate-2 1s infinite linear;
}
#loader3{
color: #3A4652;
font-size: 35px;
text-align: center;
width: 35px;
height: 35px;
bottom: -10px;
left: 3px;
animation: animate-3 1s infinite linear;
}
@keyframes animate-1{
100% { transform: rotate(-180deg); }
}
@keyframes animate-2{
100% { transform: rotate(180deg); }
}
@keyframes animate-3{
100% { transform: rotate(-180deg); }
}



Теги:
0

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

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