Прелоадер CSS · Пульсирующий круг

Прелоадер CSS - Пульсирующий круг

Индикатор - прелоадер выполненный только свойствами CSS, создаёт эффект пульсирующего круга, сделано описание как применять, добавлено демо прелоадера.

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

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

Для установки прелоадера добавьте стили 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>

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

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

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


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



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