Перейти к содержанию

<progress>

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

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

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

Демо

Формы

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

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

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

Синтаксис

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

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

Атрибуты

value

Текущее значение прогресса.

max

Максимальное значение прогресса.

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!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>

Ссылки

Комментарии