<progress>

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

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

<progress></progress>

<progress value="0.7">Выполнено на <span>70</span>%</progress>

Вид элемента зависит от наличия атрибута value, значения которого лежат в диапазоне от 0 до 1. К примеру, значение 0.7 сообщает, что задача выполнена на 70%.

Если атрибут value не указан, то индикатор будет находиться в неопределённом состоянии, показывая что задача займёт какое-то время.

Синтаксис

<progress value="<число>" max="<число>">
Текст
</progress>

Атрибуты

max: Максимальное значение прогресса.
value: Текущее значение прогресса.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>progress</title> </head> <body> <p>Пожалуйста, подождите, фотографии загружаются.</p> <progress max="100" value="25"> Загружено на <span id="value">25</span>% </progress> </body> </html>

Результат примера показан на рис. 1.

Использование progress

Использование <progress>

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

Спецификация	Статус
HTML Living Standard	Живой стандарт

Браузеры


10	12	8	11.5	6	6


4.4	6	12	7

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.