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

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

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

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

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

.loader{
width: 85px;
height: 85px;
position: relative;
margin: 50px auto;
}
.loader-inner{
border: 40px solid #000;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
animation: 750ms linear 0s normal none infinite running loading;
}
@-webkit-keyframes loading{
0% {
border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
}
25% {
border-color: rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5);
}
50% {
border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25);
}
75% {
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) rgba(0, 0, 0, 0.75);
}
100% {
border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
}
}
@keyframes loading{
0% {
border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
}
25% {
border-color: rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5);
}
50% {
border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25);
}
75% {
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) rgba(0, 0, 0, 0.75);
}
100% {
border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
}
}

Теги: