Тег <progress>: ход выполнения
Как показать долю завершённой работы и чем неопределённый прогресс отличается от нулевого.
Зачем нужен этот элемент
progress представляет ход выполнения задачи: загрузку, обработку или прохождение этапов. Значение value задаёт выполненную часть, max — общий объём. Без value индикатор показывает неопределённый прогресс, когда длительность неизвестна.
Рядом должна быть понятная подпись задачи. Можно связать label с id индикатора и продублировать число обычным текстом. Сам элемент не измеряет загрузку: значение должен обновлять код приложения или серверная разметка.
Синтаксис и пример
<label for="lessons">Пройдено уроков: 3 из 8</label>
<progress id="lessons" value="3" max="8">3 из 8</progress>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| value | Текущая выполненная часть от нуля до max. |
| max | Положительный общий объём; по умолчанию 1. |
| Без value | Неизвестная степень выполнения. |
Частая ошибка
Небольшая практика
Установите value равным 3 при max=8 и обновите подпись «3 из 8». Затем удалите value и объясните, почему это не означает нулевое выполнение.
Разберите также <meter>, <label>: эти элементы пригодятся в том же интерфейсе.