<progress>: Элемент индикатора выполнения
Интерактивный пример
HTML-элемент <progress> отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| Категории контента | Потоковый контент, фразовый контент, контент, ассоциированный с 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, результат выполнения будет выглядеть так :
Дополнительные примеры
Смотрите -moz-orient (en-US).
Спецификации
| Specification |
|---|
| HTML Standard # the-progress-element |
Поддержка браузерами
BCD tables only load in the browser