<progress> HTML

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

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

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

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

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

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

Синтаксис

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

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

WAI ARIA

Значение role по умолчанию: progressbar

Атрибуты

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