<progress>¶

Тег <progress> (от англ. progress — прогрес) используется для отображения прогресса завершённости задачи.

Изменение значения происходит через JavaScript.

Вид элемента зависит от браузера и операционной системы и может довольно сильно различаться между собой.

Демо¶

Формы

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

Can I Use progress? Data on support for the progress feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

<progress> polyfill

Синтаксис¶

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

Закрывающий тег обязателен.

Атрибуты¶

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

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

Описание и примеры¶

<!doctype html>
<html>
    <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>

Ссылки¶

Тег <progress> ^{MDN (рус.)}