Практика: измеряемая величина с подписью meter
Meter подходит для скалярного значения в известном диапазоне, например занятого места учебного архива. Он отличается от progress, который показывает ход выполняемой задачи.
Назначение
Meter подходит для скалярного значения в известном диапазоне, например занятого места учебного архива. Он отличается от progress, который показывает ход выполняемой задачи.
Как это работает
Укажите min, max и value, а также свяжите label с id. Число и единицу продублируйте видимым текстом: внешний вид шкалы и способ её озвучивания зависят от среды.
Пример
<label for="archive-meter">Заполнение учебного архива</label><meter id="archive-meter" min="0" max="100" value="35">35 из 100</meter><p>Занято 35 МБ из 100 МБ. Это условные данные примера.</p>
<style>meter{display:block;width:100%;max-width:24rem;height:1.5rem;margin-block:.5rem}</style>Что должно получиться
Шкала показывает часть диапазона, а точное значение доступно текстом. Данные статические и не измеряют реальный диск или учётную запись посетителя.
Граница применения и частая ошибка
Не используйте meter вместо индикатора неизвестной длительности загрузки. Если добавите low, high и optimum, определите их смысл по задаче: высокий уровень не всегда означает хороший результат. Цвет шкалы не должен быть единственным объяснением состояния.
Самостоятельная проверка
Измените значение на границы диапазона и проверьте подпись. Затем сформулируйте пример для progress и сравните назначение элементов. Для реальных данных обновляйте одновременно шкалу и видимое число.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.