<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")

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 15 апр. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

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

In this article

Интерактивный пример

Атрибуты

Примеры

Result

Дополнительные примеры

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

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

Смотрите также

Help improve MDN