Установка прелоадера
Установка стилей прелоадера
Для установки прелоадера добавьте стили 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>
Демо прелоадера
Дополнительные сведения
Прелоадер можно использовать как индикатор загрузки страницы, посмотрите материал чтобы быть в курсе.