Тег <meter>: значение в диапазоне
Как показать заполненность или показатель с известными границами.
Зачем нужен этот элемент
meter показывает скалярную величину внутри известного диапазона: заполненность хранилища или показатель качества. В отличие от progress, здесь не обязательно есть задача, которая должна завершиться. Значение имеет смысл относительно минимума и максимума.
Атрибуты low, high и optimum описывают зоны и предпочтительное значение. Внешний вид зависит от браузера, поэтому не передавайте точную величину только цветом полосы. Видимая текстовая подпись помогает понять показатель без визуального индикатора.
Синтаксис и пример
<label for="storage">Занято 40 из 100 МБ</label>
<meter id="storage" min="0" max="100" low="60" high="85" optimum="20" value="40">40%</meter>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| min / max | Границы диапазона. |
| value | Текущее значение. |
| low / high | Пороговые уровни диапазона. |
| optimum | Предпочтительное значение. |
Частая ошибка
Небольшая практика
Измените value с 40 на 85 и одновременно обновите текст. Проверьте, что даже без цвета понятно, какая доля пространства занята.
Разберите также <progress>, <label>: эти элементы пригодятся в том же интерфейсе.