Подробное описание и демонстрацией работы эффекта загрузки под номером №206 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 206
<!-- <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); }
}