29.10.2015

CSS прогресс бар с меняющимся значением

Красивый CSS прогресс бар можно найти на любом сайте по веб-разработке, поэтому я немного усложнил задачу сделав его динамическим используя только CSS и свой HTML тег.

Прогресс бар — это графический индикатор прогресса, например такого как загрузка.

Для создания динамического индикатора понадобится добавить новый тег в конструкцию, например data_p.
Исходя из значения data_p будет определятся стиль с соответствующей шириной. Значение data_p может меняться от 10 до 100, по 10 единиц в шаг, это самое удобное для меня.

Нужно создать контейнер для полосы загрузки, для этого используем обычный div, а для полосы используем span внутри него. В полосе загрузки укажем data_p, например span data_p=10, этот тег будет определять ширину полосы в прогресс баре.

Таким образом у меня получилось это (для простоты убрал всю анимацию из примера):

See the Pen dYKJmW by Alexander (@piocan) on CodePen.

Как видно из примера когда мы меняем значение data_p к span data_p=** будет применяется стиль с соответствующим data_p, мы можем указывать его с различными интервалами, будь то 1 или 5, но в этом случае лучше использовать php или JS для изменения ширины. Нужно исходить из задачи, например в своем резюме я использовал способ изменения ширины через CSS, так как были изменения по шкале от 1 до 10, а всего было 14 прогресс баров, то для удобного редактирования прогресс баров, стили были очень удобны.

А вот как это будет выглядеть после добавления декоративных элементов и анимации:

See the Pen wKXprX by Alexander (@piocan) on CodePen.

Данный CSS прогресс бар, как решение отлично подойдет где он не меняется после загрузки страницы, это быстро и просто. Если же стоит задача менять статус прогресс бара в браузере, тогда нужно обратится к помощи JavaScript.

Внешний вид был позаимствован у Red Team