Очень простой урок о том, как можно сделать анимированный индикатор прогресса с использованием только CSS. Трюк очень простой. Нам нужно 3 элемента - 1 контейнер и два связанных элемента. Концепция Мы поместим фоновое изображение в контейнер и определим фиксированную ширину и высоту. Первый вложенный элемент (SPAN) будет работать как индикатор прогресса. Мы будем позиционировать в абсолютных координатах второй вложенный элемент (EM) над индикатором прогресса и сдвигать его влево на нужное значение. EM имеет такое же фоновое изображение как и контейнер, поэтому это даст нам эффект остановки индикатора прогресса на определенной позиции (проценте выполнения). Cхема индикатора прогресса на CSS Разметка Для сохранения выразительности используеум список определений (DL) для нескольких значений. Для единичного индикатора можно использовать любой элемент. В примере используется абзац (P). <dd> <span><em style="left:100px">50%</em></span> </dd> Для смещения влево используется строчный style для элемента EM, так как помещение двух значений в одно место является очень удобным фактом. Анимация Как она выполнена? Конечно же с использованием анимированного gif. SPAN имеет ширину 200px фонового рисунка gif, который анимируется от "zero" до 200px. Не имеет значения, какой процент мы используем, анимация проходит полностью и останавливается. Эффект остановки на нужном положении достигается использованием EM, как упоминалось выше. Смещение EM В примере используется ширина индикатора прогресса 200 px. Элемент EM также имеет ширину 200px. Таким образом каждый процент имеет ширину 2px. Если мы хотим точно сдвинуть EM, нужно умножить процент на 2. то есть 50% означают 100px смещения влево, 24% означают 48px смещения, 75% - 150px и так далее. Смотрите на картинку.