Установка прелоадера
Установка стилей прелоадера
Для установки прелоадера добавьте стили CSS на странице, где будет работать прелоадер.
<style>
.tor-pulsate {
border:3px solid #666;
border-radius:30px;
height:30px;
left:50%;
margin:-15px 0 0 -15px;
opacity:0;
position:absolute;
top:50%;
width:30px;
animation: pulsate 1s ease-out;
animation-iteration-count:infinite;
}
@-webkit-keyframes pulsate {0% {transform:scale(.1);opacity: 0.0;} 50% {opacity:1;} 100% {transform:scale(1.2);opacity:0;}}
@keyframes pulsate {0% {transform:scale(.1);opacity: 0.0;} 50% {opacity:1;} 100% {transform:scale(1.2);opacity:0;}}
</style>
Установка кода прелоадера
Код устанавливается в теле тега <body>, или внутри элемента для которого может быть применён.
<div class="tor-pulsate"></div>
Демо прелоадера
Дополнительные сведения
Прелоадер можно использовать как индикатор загрузки страницы, посмотрите материал чтобы быть в курсе.