Подробное описание и демонстрацией работы эффекта загрузки под номером №197 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 197
<div class="demo"> <div class="loader"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #23242c; }
.loader{
width: 40px;
height: 40px;
border-radius: 50%;
background: #e025a8;
margin: 50px auto;
transform-style: preserve-3d;
animation: loading-1 0.8s infinite ease-out;
animation-fill-mode: forwards;
}
@keyframes loading-1{
0%{
box-shadow: 0 0 0 10px #23242c, 0 0 0 12px rgba(224, 37, 168,0.75);
}
40%{
box-shadow: 0 0 0 10px transparent, 0 0 0 20px transparent;
}
50%{
background: rgb(224, 37, 168);
transform: scale(1.3) rotateY(20deg);
}
100%{ transform: rotateY(180deg); }
}