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

Подробное описание и демонстрацией работы эффекта загрузки под номером №128 для бибилиотеки 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: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #e14c65;
margin: 60px auto;
overflow: hidden;
-webkit-animation: loading-1 0.7s linear infinite alternate;
animation: loading-1 0.7s linear infinite alternate;
}
@-webkit-keyframes loading-1{
0%{
-webkit-box-shadow: #e14c65 0 0 0px 20px;
box-shadow: #e14c65 0 0 0px 20px;
}
40%{
-webkit-box-shadow: none;
box-shadow: none;
}
100%{
-webkit-box-shadow: #e14c65 0 0 0px 25px inset;
box-shadow: #e14c65 0 0 0px 25px inset;
}
}
@keyframes loading-1{
0%{
-webkit-box-shadow: #e14c65 0 0 0px 20px;
box-shadow: #e14c65 0 0 0px 20px;
}
40%{
-webkit-box-shadow: none;
box-shadow: none;
}
100%{
-webkit-box-shadow: #e14c65 0 0 0px 25px inset;
box-shadow: #e14c65 0 0 0px 25px inset;
}
}

Теги: