Прелоадер CSS · Вращающийся бордюр

Прелоадер CSS - Вращающийся бордюр

Индикатор - прелоадер в виде вращающегося бордюра сделан при использовании свойств css, сделано описание для использования дополненное демо.

Установка прелоадера

Установка стилей прелоадера

Для установки прелоадера добавьте стили CSS на странице, где будет работать прелоадер, в зоне <head>.

<style>
.preloader {
position: fixed;
background: #000;
bottom: 0;
right: 0;
left: 0;
top: 0;
z-index: 9998;
}
.rotating-border {
position: absolute;
border-left: 2px solid #ffffff;
border-top: 2px solid rgba(255, 255, 255, 0.2);
border-right: 2px solid rgba(255, 255, 255, 0.2);
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
height: 46px;
width: 46px;
left: 50%;
top: 50%;
margin: -23px 0 0 -23px;
text-indent: -9999em;
font-size: 10px;
z-index: 9999;
-webkit-animation: load 0.8s infinite linear;
-moz-animation: load 0.8s infinite linear;
ms-animation: load 0.8s infinite linear;
o-animation: load 0.8s infinite linear;
animation: load 0.8s infinite linear;
}
.rotating-border,
.rotating-border:after {
border-radius: 50%;
width: 46px;
height: 46px;
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>

Установка кода прелоадера

Код устанавливается в теле тега <body>, или внутри элемента для которого может быть применён.

<div class="preloader">
<div class="rotating-border"></div>
</div>

Демо прелоадера

Дополнительные сведения

Прелоадер можно использовать как индикатор загрузки страницы, посмотрите материал чтобы быть в курсе.


Рейтинг: 5.0/5 из 1



Добавлено Автор Ник Источник Просмотров Комментариев Теги
10-03-2015 Михаил Меренков aTmpl © 573 0 индикатор css, прелоадер css