<progress>: Элемент индикатора выполнения

HTML-элемент <progress> отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).

Категории контента Потоковый контент, фразовый контент, контент, ассоциированный с  label, явный контент.
Разрешённый контент Фразовый контент, но среди его потомков не должно быть элемента <progress>.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Разрешённые родители Любой элемент, который принимает фразовый контент.
Разрешённые ARIA роли Нет
DOM интерфейс HTMLProgressElement (en-US)

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

max
Этот атрибут описывает сколько затрат требует задача, указанная элементом  progress. Атрибут max, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой.  Значение по умолчанию 1.
value
Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до max, или между 0 и 1, если max не указан. Если атрибут value не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займёт.

Примечание: Минимальное значение всегда 0,  а атрибут min недопустим для прогресс-элемента. Вы можете использовать свойство CSS -moz-orient (en-US), чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.

Примечание: Псевдокласс :indeterminate может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute("value")

Примеры

<progress value="70" max="100">70 %</progress>

Result

Для Windows 7, результат выполнения будет выглядеть так :

progress-firefox.JPG

Дополнительные примеры

Смотрите -moz-orient (en-US).

Спецификации

Specification
HTML Standard (HTML)
# the-progress-element

Поддержка браузерами

BCD tables only load in the browser

Смотрите также