Прогресс-бар через CSS3

Взгляните - вот лишь несколько вариантов в качестве примера:



И, первую очередь - заметим, речь в данной статье ни в коем случае не об изображении, а только о возможностях CSS3! Вследствие того, что автор данной статьи является профессиональным дизайнером, учтена и функция отката для неновых версий браузеров. Взгляните - вот так все это выглядят в Opera 11, который лишь частично поддерживает параметры CSS3:



Также заметим, что в браузерах, начисто лишенных поддержки CSS3, полосы смотрятся ещё более упрощенно.

Увидеть демо
Загрузить файлы

Основа HTML

Сама полоса представляет собой div с классом. Внутри него мы разместим span, который будет действовать в качестве «заполненной» области полосы прогресса. Этого можно добиться посредством строчной стилизации. Здесь нам нужно, чтобы полоса "понимала" - в какой мере она должна быть заполнена, и именно в таких случаях применяются строчные элементы. Альтернативным вариантом CSS будут классы, типа «fill-10-percent», «fill-one-third» и так далее.

Основа:


Начало CSS

Оболочка div’а – это и есть, собственно, указатель прогресса в нашей полосе. Для нас совершенно нет необходимости задавать параметр ширины для того, чтобы она распространялась на всю ширину родительского блочного элемента. Но, если желаете - сможете и задать параметр. Параметр высоты - любой. Он равен 20 пикселей, но вы также сможете изменить его на свой вкус. Далее - давайте закруглим углы во всех браузерах, в которых это возможно, и выставим внутреннюю тень для придания эффекта глубины.

Span внутри призван заполнять часть полосы прогресса. Давайте решим отображение блочного типа - с параметром высоты в 100%; т.е. растянем его на всю доступную область. Далее - воспользуемся некоторым кодом CSS3 для создания градации и закругления углов.
Другие цвета

Возможно, окажется нелишним изменить цвет. Для этого - добавьте класс с именем «orange» или «red» к оболочке div’а, и эта проблема будет решена.

Полосы

В наших силах также добавить интересный «полосатый» эффект посредством добавления еще одного элемента поверх нашего span’а, и затем - задав ему повторяющуюся CSS-градацию. В контексте семантики, это лучше всего удастся реализовать посредством псевдоэлемента, поэтому именно так мы и поступим - зададим ему абсолютную позицию над конкретной областью нашего span’а (у которого уже задано относительное значение позиции), а затем закруглим углы таким образом, чтобы полосы смотрелись опрятно.

Анимация полос

На сегодняшний день только лишь Firefox 4 способен анимировать псевдо-элементы, и только браузеры семейства Webkit умеют делать пошаговую анимацию. Поэтому, увы, у нас не так уж и много возможностей... Если же вы считаете, что анимация необходима - добавим ещё один span и зададим браузерам семейства Webkit эту задачу.

Span теперь идентичен псевдоэлементу, поэтому воспользуемся теми же значениями...

Избегаем дублирования...

Теперь - сместим позиционирование фона дальше на значение, которое совпадает с его размером:

И обзовем все это анимацией:


Возможно, нам следовало оставить привязку анимации и к псевдоэлементу, чтобы все это заработало, как только браузеры Webkit будут поддерживать эту функцию.

Анимация заполненной ширины

К сожалению, мы не сможем анимировать элемент при автоматической или натуральной ширине, что, вероятно даёт возможность анимации строчных элементов.

Автор адаптировал элемент для баг-трэкеров всех популярных браузеров, но сегодня это не поддерживается. Вместо этого - воспользуемся jQuery. Установите оригинальную ширину, принудительно уменьшите её до нуля, а затем анимируйте:
Пожалуй, это все.

Прочесть оригинал статьи