Подробное описание и демонстрацией работы эффекта загрузки под номером №204 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 204
<div class="demo"> <div class="loader"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{background-color: #11111f;}
.loader{
width: 5em;
height: 13em;
font-size: 10px;
display: flex;
flex-direction: column;
margin: 50px auto;
}
.loader::before {
content: '';
width: 5em;
height: 5em;
background-color: #F0C808;
border-radius: 50%;
animation: ball-jumping 1s ease-in-out infinite;
}
.loader::after {
content: '';
width: 5em;
height: 8em;
background-color: #03a4da;
border-radius: 0.5em;
animation: rect-rotating 1s ease-in-out infinite;
}
@keyframes ball-jumping {
20%, 80% {transform: translateY(-2em);}
50% {transform: translateY(calc((8em - 5em) / 2));}
}
@keyframes rect-rotating {
50% {transform: rotate(90deg);}
100% {transform: rotate(180deg);}
}