Подробное описание и демонстрацией работы эффекта загрузки под номером №209 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 209
<div class="preloader"> <div class="loader"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background-color: #2b103d; }
.preloader{
display: flex;
align-items: center;
justify-content: center;
}
.loader {
font-size: 20px;
width: 10em;
height: 10em;
margin: 0 auto;
}
.loader::before,
.loader::after {
content: '';
width: 1em;
height: 1em;
background-color: currentColor;
box-shadow:
0 0, 2em 0, 4em 0, 6em 0,
0 2em, 2em 2em, 4em 2em, 6em 2em,
0 4em, 2em 4em, 4em 4em, 6em 4em,
0 6em, 2em 6em, 4em 6em, 6em 6em;
border-radius: 50%;
position: absolute;
animation: round 2s ease infinite;
}
.loader::before { color: #ffe600; }
.loader::after {
color: #ff0a84;
animation-delay: -1s;
}
@keyframes round {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(3em) translateY(0); }
50% { transform: translateX(3em) translateY(3em); }
75% { transform: translateX(0) translateY(3em); }
}