This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<progress>: Элемент индикатора выполнения
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTML-элемент<progress> отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).
Интерактивный пример
<label for="file">File progress:</label><progress max="100" value="70">70%</progress>label { padding-right: 10px; font-size: 1rem;}| Категории контента | Потоковый контент,фразовый контент, контент, ассоциированный с label, явный контент. |
|---|---|
| Допустимый контент | Фразовый контент, но среди его потомков не должно быть элемента<progress>. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимаетфразовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLProgressElement |
Атрибуты
Этот элемент включает в себяглобальные атрибуты.
maxЭтот атрибут описывает сколько затрат требует задача, указанная элементом
progress. Атрибутmax, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.valueЭтот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до
max, или между 0 и 1, еслиmaxне указан. Если атрибутvalueне указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займёт.
Примечание:Минимальное значение всегда 0, а атрибутmin недопустим для прогресс-элемента. Вы можете использовать свойство CSS-moz-orient, чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.
Примечание:Псевдокласс:indeterminate может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощьюelement.removeAttribute("value")
Примеры
<progress value="70" max="100">70 %</progress>Result
Дополнительные примеры
Смотрите-moz-orient.
Спецификации
| Specification |
|---|
| HTML # the-progress-element |