alexilin

В этой статье создадим анимированный индикатор загрузки на «чистом» CSS. Для создания нам потребуется 3 элемента: внешний контейнер и 2 вложенных.

Укажем фоновое изображение для контейнера и установим фиксированную ширину и высоту. Первый дочерний элемент span будет выступать в качестве индикатора. Второй дочерний элемент em будет абсолютно спозиционирован над индикаторо. Элемент em имеет тот же фон, что и контейнер, поэтому он создает эффект остановки индикатора на определенном значении.

Чтобы сохранить семантику насколько это возможно был использован список dl для нескольких значений. Если вам нужен всего один индикатор вы можете использовать другой элемент.

<dd>
	<span><em style="left:100px">50%</em></span>
</dd>

Использование инлайновых стилей для позиционирования элемента em, обусловлено тем, что так более удобно прописывать значения.

Анимация реализована с помощью анимированного GIF. Элемент span имеет фоновое изображение шириной 200px, который показывает загрузку с 0 до 200px. Независимо от того, какой процент мы указываем индикатор проходит весь путь и останавливается. Эффект остановки осуществляется с помощью em, как уже было сказано ранее.

Т.к. индикатор имеет ширину равную 200px и элемент em также шириной в 200px, то каждый процент равен 2px. Поэтому для значения 50% необходимо указывать смещение равное 100px, для 24% — 48px, 75% — 150px и т.д.

Оригинал: Pure CSS Animated Progress Bar