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

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

Демонстрация эффекта загрузки страницы — стиль 213

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

<div class="preloader"></div>

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

.demo{ background: linear-gradient(to right,#7b4379,#dc2430);}
.preloader{
height: 80px;
width: 80px;
margin: 20px auto 0;
position: relative;
}
.preloader:before,
.preloader:after{
content: '';
height: 100%;
width: 100%;
border: 9px solid #fff;
border-color: transparent #fff;
position: absolute;
left: 0;
top: 0;
animation: spin 2.2s linear 0s infinite normal;
}
.preloader:after{
width: 50%;
height: 50%;
margin: auto;
border-style: dotted;
border-radius: 50px;
left: 0;
top: 0;
bottom: 0;
right: 0;
animation: spinback 1.5s linear 0s infinite normal;
}
@keyframes spin{
from{ transform: rotate(0); }
to{ transform: rotate(360deg); }
}
@keyframes spinback{
from{ transform:rotate(0); }
to{ transform:rotate(-360deg); }
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *