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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader"></div>
</div>
</div>
</div>

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

.loader{
width: 16px;
height: 16px;
border-radius: 50%;
background: #fcc25e;
margin: 70px auto;
overflow: hidden;
position: relative;
box-shadow: #fff 0 0 15px 0, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px;
-webkit-animation: loading-1 5s infinite ease-in-out;
animation: loading-1 5s infinite ease-in-out;
}
@-webkit-keyframes loading-1{
0%{
transform: rotate(0deg);
box-shadow: #fff 0 0 15px 0, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px;
}
50%{
transform: rotate(1080deg);
box-shadow: #fff 0 0 15px 0, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px;
}
}
@keyframes loading-1{
0%{
transform: rotate(0deg);
box-shadow: #fff 0 0 15px 0, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px;
}
50%{
transform: rotate(1080deg);
box-shadow: #fff 0 0 15px 0, #be5c90 12px 12px 0 4px, #be5c90 -12px 12px 0 4px, #be5c90 -12px -12px 0 4px, #be5c90 12px -12px 0 4px;
}
}

Теги: