HTML тег `<progress>`

Значение и применение

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

У тега <progress> используется два основных атрибута это max, который определяет общий объем текущего процесса (его значение должно быть положительным) и value, который указывает уже выполненную часть. Данный тег не поддерживается браузером Internet Explorer версии 9 и ниже.

Тег <progress> не подходит для отображения таких задач как, к примеру, использование дискового пространства или релевантность поискового запроса. Для этих целей в HTML предназначен тег <meter>.

Текст, размещенный внутри элемента <progress> будет отображен только теми браузерами, которые не имеют поддержки данного элемента.

Обращаю Ваше внимание, что необходимо обязательно указывать закрывающий элемент </progress>.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.progress
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`progress`	✓6	✓12	✓6 Версия 6 выпущена в 2011 г. Примечание MDN (англ.) Before Firefox 14, the `<progress>` element was incorrectly classified as a form element, and therefore had a `form` attribute. This has been fixed. Firefox provides the `::-moz-progress-bar` pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.	✓11	✓6	✓18	✓6 Версия 6 выпущена в 2011 г. Примечание MDN (англ.) Before Firefox for Android 14, the `<progress>` element was incorrectly classified as a form element, and therefore had a `form` attribute. This has been fixed. Firefox for Android provides the `::-moz-progress-bar` pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.	✓11	✓7 Версия 7 выпущена в 2013 г. Примечание MDN (англ.) Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).	✓1.0	✓4.4	✓7 Версия 7 выпущена в 2013 г. Примечание MDN (англ.) WebView on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
`max`	✓6	✓12	✓6	✓11	✓6	✓18	✓6	✓11	✓7	✓1.0	✓4.4	✓7
`value`	✓6	✓12	✓6	✓11	✓6	✓18	✓6	✓11	✓7	✓1.0	✓4.4	✓7

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`max`	`number`	Определяет общий объем текущего процесса. Значение должно быть больше нуля. Отрицательные значения не допускаются.
`value`	`number`	Указывает уже выполненную часть процесса. Это должно быть положительное число с плавающей точкой между 0 и значением атрибута `max`, или между 0 и 1 если атрибут не используется.

Примеры, попробуйте сами

Ход выполнения

Измените value и max. У второго индикатора значение не задано.

index.html

HTML

<label>Выполнено <progress value="35" max="100">Выполняется</progress></label>
<p>Объём неизвестен: <progress>Выполняется</progress></p>

Отличия HTML 4.01 от HTML 5

Элемент <progress> считается новым в HTML 5.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <progress>