Тег <progress>

Синтаксис

Описание

Тег <progress> (от англ. progres — прогресс) отображает индикатор, показывающий ход выполнения задачи. Обычно отображается в виде индикатора выполнения.

Используйте тег <progress> в сочетании с JavaScript.

Внимание!

Элемент <progress> не должен использоваться для определения индикатора состояния (для отображения объема жидкости/давления, результатов опроса, заряда батареи, использования дискового пространства и т.д.). Для этого используйте тег <meter>.

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

Атрибуты

Атрибут	Значение	Описание
max	число	Определяет объем трудозатрат, требуемых для выполнения задачи
value	число	Указывает, сколько задач было завершено

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег progress</title>

</head>

<body>

<progress value="30" max="100"></progress><br>

<progress></progress>

</body>

</html>

Отображение в браузере:

30 из 100

Параметры CSS по умолчанию

progress {
height: 16px;
width: 150px;
border: 1px solid #000;
color: #7BAAF7;
}

progress::-webkit-progress-bar {
height: 16px;
width: 150px;
border: 1px solid #000;
background: #fff;
}

progress::-webkit-progress-value {
background-color: #7BAAF7;
}

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<progress>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

Да