<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 id="file" 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 |
Совместимость с браузерами
Loading…