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

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

Интерактивный пример

Категории контента Потоковый контент, фразовый контент, контент, ассоциированный с label, явный контент.
Допустимый контент Фразовый контент, но среди его потомков не должно быть элемента <progress>.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который принимает фразовый контент.
Допустимые 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")

Примеры

html

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

Result

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

progress-firefox.JPG

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

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

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

Specification
HTML Standard
# the-progress-element

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

BCD tables only load in the browser

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