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

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

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

<div class="loader">
<span class="loader-inner"></span>
</div>

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

.loader{
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
position: relative;
animation: loading-1 0.8s infinite;
}
.loader:before,
.loader:after{
content: "";
width: 150px;
height: 150px;
border-radius: 50%;
margin-left: 50%;
border: 10px solid transparent;
border-left: 10px solid #e3b505;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.loader:after{
border: 10px solid transparent;
border-right: 10px solid #e3b505;
position: absolute;
}
.loader .loader-inner{
display: block;
width: 120px;
height: 120px;
border-radius: 50%;
border: 6px solid #f42b25;
margin: 0 auto 0 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.loader .loader-inner:before,
.loader .loader-inner:after{
content: "";
width: 80px;
height: 80px;
border-radius: 50%;
border: 10px solid transparent;
border-left: 10px solid #0cb3ea;
margin-left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.loader .loader-inner:after{
border: 10px solid transparent;
border-right: 10px solid #0cb3ea;
}
@-webkit-keyframes loading-1{
0%{ transform: rotate(180deg); }
100%{ transform: rotate(360deg); }
}
@keyframes loading-1{
0%{ transform: rotate(180deg); }
100%{ transform: rotate(360deg); }
}

Теги: