<progress>: Элемент индикатора выполнения
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML-элемент <progress>
отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).
Интерактивный пример
Категории контента | Потоковый контент, фразовый контент, контент, ассоциированный с 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 Standard # the-progress-element |
Совместимость с браузерами
BCD tables only load in the browser