<progress>

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

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

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

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

<progress value="0.7">

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

<progress>

Синтаксис

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

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

Браузеры

10 12 8 11.5 6 6
4.4 6 12 7

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

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

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