Стилизация элемента <progress>

Шкала прогресса — это визуальный элемент, используемый для показа степени выполнения задачи или процесса. На веб-страницах шкала прогресса применяется при загрузке файла и содержимого веб-страницы, установке модулей, заполнении форм и др. Визуально шкала помогает пользователям понять, насколько далеко продвинулся процесс и сколько времени осталось до его завершения.

В HTML для отображения прогресса применяется элемент <progress>. Он сообщает, насколько выполнена указанная задача. К примеру, если задача выполнена на 80%, то мы увидим горизонтальную полосу, которая на 80% выделена фоновым цветом (рис. 1). При этом никакие надписи возле шкалы не отображаются, поэтому процент выполнения можно узнать лишь приблизительно, на глаз.

Рис. 1. Вид <progress> в браузере Safari

Влад Мержевич

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