Прогресс задания: шкала и текстовое значение рядом
Индикатор прогресса помогает оценить долю завершённой работы. Числовую шкалу стоит сопровождать понятным текстом, чтобы состояние не зависело только от длины цветной полосы.
Назначение
Индикатор прогресса помогает оценить долю завершённой работы. Числовую шкалу стоит сопровождать понятным текстом, чтобы состояние не зависело только от длины цветной полосы.
Как это работает
У progress атрибут value задаёт выполненную часть, max — общий объём. Label даёт название индикатора. Если объём неизвестен, состояние без value отличается от точного нулевого прогресса.
Пример
<label for="exercise-progress">Проверка учебных страниц</label>
<progress id="exercise-progress" value="3" max="5">3 из 5</progress>
<p>Проверено 3 из 5 страниц. Следующий шаг — проверить страницу контактов.</p>Что должно получиться
Шкала показывает три пятых, а обычный текст поясняет количество и следующий шаг. В примере состояние статическое: скрипт не выполняет проверку страниц.
Граница применения и частая ошибка
Текст внутри progress не заменяет доступное название и не всегда виден при поддержке элемента. Не придумывайте точный процент для процесса с неизвестным объёмом. Частые объявления каждого малого изменения могут отвлекать пользователя.
Самостоятельная проверка
Проверьте значения 0, 3 и 5 при max=5, обновляя также соседний текст. Затем удалите value и сравните неопределённое состояние. Объясните, почему это не то же самое, что «ничего ещё не сделано».
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.