Индикатор загрузки на чистом CSS

Віталий

10 років ago

Доброго времени суток. 🙂

Часто для того чтобы показать какую-нибудь информацию перед пользователем, ее нужно загрузить. Иногда это может занять определенное время. Для того, чтобы пользователь не видел пустой экран, часто выводят прогрессбар (индикатор загрузки). Это может быть GIF-анимация, javascript или даже флеш. Такой эффект помогает сделать загрузку более живой и объяснить посетителю, что скоро что-то появится, и перед ним не просто так пустота, которая ни о чем не говорит.

Я хочу показать Вам способ как организовать такую анимацию загрузки с помощью чистого CSS, без использования javascript, изображений и тд. Все что нужно сделать это добавить минимальную HTML-разметку, стилей, настроить все и радоваться результату. И так, по порядку.

HTML - разметка

В нужном месте просто добавьте вот такую вот строку:

<div class="progress"><div></div></div>

CSS - стили

В Ваш файл стилей нужно добавить следующие стили, которые организуют анимацию и зададут внешний вид анимации.

@keyframes spin {
	to { transform: rotate(1turn); }
}
.progress {
	position: relative;
	display: inline-block;
	width: 5em;
	height: 5em;
	margin: 10px;
	font-size: 8px;
	text-indent: 999em;
	overflow: hidden;
	animation: spin 1s infinite steps(8);
}
.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
	content: '';
	position: absolute;
	top: 0;
	left: 2.25em;
	width: .5em;
	height: 1.5em;
	border-radius: .2em;
	background: #eee;
	box-shadow: 0 3.5em #eee;
	transform-origin: 50% 2.5em;
}
.progress:before {
	background: #555;
}
.progress:after {
	transform: rotate(-45deg);
	background: #777;
}
.progress > div:before {
	transform: rotate(-90deg);
	background: #999;
}
.progress > div:after {
	transform: rotate(-135deg);
	background: #bbb;
}

Давайте разберем некоторые параметры, чтобы Вы могли настроить анимацию.

В строке - animation: spin 1s infinite steps(8); - два параметра, которые Вы можете настроить. Первый - это время полной анимации, в данном случаи это 1 секунда - 1s. Второй - это количество шагов, за которые осуществится анимация. В нашем случаи 8, потому как у нас 8 полосок как в примере. Эффект будет похож на перемигивание каждой полоски по очереди.
Если установите значение, например - 50, то анимация станет похожей на флеш, будет плавной и мягкой.
В строке - transform: rotate(1turn); - можно настроить значение - 1turn. В предыдущем пункте мы обозначили время анимации - 1 секунда, а этот параметр устанавливает количество оборотов за эту секунду. В данном случаи - 1 оборот.
У класса - progress есть параметр font-size: 8px;, с его помощью можно настроить размер данной анимации. Просто измените цифру.

Также можете настроить остальные параметры, цвет и тд. Если все сделаете правильно и настроите под себя, получите отличный результат, который украсит Ваш сайт или страницу.

А Вы используете анимацию загрузки на своем сайте?

На этом все, спасибо за внимание. 🙂

Exit mobile version