Справочник · HTML

progress: показатель выполнения

progress показывает, какая часть задачи уже сделана. Это не ползунок для ввода.

Как это работает

Атрибут max задаёт целое, value — текущее. Без value элемент может выглядеть как неопределённая загрузка. Рядом нужен текст: одна полоса без слов не говорит, что именно грузится. Для оценки в баллах, которую человек двигает, progress не подходит. Не используй его как декоративную линию навыка без настоящего числа.

<label for="course">Пройдено уроков</label>
<progress id="course" max="10" value="4">4 из 10</progress>

Когда использовать

Загрузка, прогресс курса, заполненность известным числом. Ввод числа делай через input.

Частые ошибки

• Нет текста рядом, и смысл полосы неясен.
• value больше max.
• Полосой притворился div без числа.