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

Базовая реализация Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Попробуйте

Атрибуты

Этот элемент включает глобальные атрибуты.

max: Этот атрибут описывает объём работы, необходимой для задачи, указанной элементом progress. Атрибут max, если присутствует, должен иметь значение больше 0 и быть корректным числом с плавающей точкой. Значение по умолчанию 1.
value: Этот атрибут определяет, сколько задачи выполнено. Он должен быть корректным числом с плавающей точкой между 0 и max, или между 0 и 1, если max отсутствует. Если атрибут value отсутствует, полоса прогресса является неопределённой; это указывает на текущую активность без указания ожидаемого времени её выполнения.

Примечание: В отличие от элемента <meter>, минимальное значение всегда равно 0, и атрибут min не разрешён для элемента <progress>.

Примечание: Псевдокласс :indeterminate может использоваться для сопоставления с неопределёнными полосами прогресса. Чтобы изменить полосу прогресса на неопределённую после присвоения значения, необходимо удалить атрибут value с помощью element.removeAttribute('value').

Удобство использования

Отображение надписей

В большинстве случаев необходимо предоставлять доступную метку при использовании <progress>. Хотя можно использовать стандартные атрибуты ARIA для маркировки aria-labelledby или aria-label, как для любого элемента с role="progressbar", при использовании <progress> можно также использовать элемент <label>.

Примечание: Текст, размещённый между тегами элемента, не является доступной меткой; он рекомендован только как резервный вариант для старых браузеров, не поддерживающих этот элемент.

Примеры

html

<label>
  Uploading Document: <progress value="70" max="100">70 %</progress>
</label>

<!-- OR -->
<br />

<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

Результат

Описание конкретной области

Если элемент <progress> описывает прогресс загрузки раздела страницы, используйте aria-describedby для указания состояния и установите aria-busy="true" для раздела, который обновляется, удаляя атрибут aria-busy после завершения загрузки.

Примеры

html

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content is for this region is loading -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>

Результат

Примеры

html

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

Результат

Техническое описание

Категории содержимого	Текстовое содержимое, фразовое содержимое, помечаемое содержимое, ощутимое содержимое.
Разрешённое содержимое	Фразовое содержимое, но среди его потомков не должно быть элемента `<progress>` .
Исключение тега	Нет, как открывающий, так и закрывающий тег обязательны.
Разрешённые родительские элементы	Любой элемент, принимающий фразовое содержимое.
Неявная роль ARIA	`progressbar`
Разрешённые роли ARIA	Нет `role` разрешено
Интерфейс DOM	`HTMLProgressElement`

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

Спецификация
Стандарт HTML # the-progress-element

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`progress`	6	12	6 ["Перед Firefox 14, элемент `<progress>` неправильно классифицировался как элемент формы и, следовательно, имел атрибут `form`. Это было исправлено.", "Firefox предоставляет псевдоэлемент `::-moz-progress-bar`, который позволяет стилизовать часть внутренней части полосы прогресса, представляющей количество выполненной работы."]	11	6	18	6 ["Перед Firefox 14, элемент `<progress>` неправильно классифицировался как элемент формы и, следовательно, имел атрибут `form`. Это было исправлено.", "Firefox предоставляет псевдоэлемент `::-moz-progress-bar`, который позволяет стилизовать часть внутренней части полосы прогресса, представляющей количество выполненной работы."]	11	7 Safari на iOS не поддерживает неопределённые полосы прогресса (они отображаются как полосы прогресса с завершением 0%).	1.0	4.4
`max`	6	12	6	11	6	18	6	11	7	1.0	4.4
`value`	6	12	6	11	6	18	6	11	7	1.0	4.4

См. также

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress