Прогресс-бар и счетчики: тег <progress> и <meter>

Визуализируем прогресс: теги <progress> и <meter>

Эти два тега — настоящие мастера визуализации данных! Они превращают сухие цифры в наглядные индикаторы, которые сразу показывают: сколько выполнено, сколько осталось, каков текущий уровень.

<progress>: индикатор выполнения задач

Когда нужно показать ход выполнения процесса (загрузка, прогресс в игре, заполнение формы), <progress> — идеальный выбор.

Базовый синтаксис:

<progress value="70" max="100">70%</progress>

• value — текущее значение (обязательный атрибут)
• max — максимальное значение (по умолчанию 1)
• Текст внутри — фолбэк для старых браузеров

Пример с динамикой (JavaScript):

<progress id="fileProgress" max="100">0%</progress>

<script>
  let progress = 0;
  const bar = document.getElementById('fileProgress');

  const interval = setInterval(() => {
    progress += 10;
    bar.value = progress;
    if(progress >= 100) clearInterval(interval);
  }, 1000);
</script>

<meter>: отображение измеряемых величин

Этот тег — визуальный измеритель для значений с известным диапазоном (объем памяти, рейтинг, температура).

Атрибуты-подсказки для браузера:

<meter 
  value="6" 
  min="0" 
  max="10"
  low="3" 
  high="8" 
  optimum="9">
  6 из 10
</meter>

• low/high — границы "низкого" и "высокого" значений
• optimum — идеальное значение (влияет на цвет)

Практический пример — уровень заряда:

<meter 
  id="batteryLevel" 
  min="0" max="100" 
  low="20" high="80" 
  value="45">
</meter>

<p>Текущий заряд: <span id="batteryValue">45</span>%</p>

<script>
  navigator.getBattery().then(battery => {
    document.getElementById('batteryLevel').value = battery.level * 100;
    document.getElementById('batteryValue').textContent = Math.round(battery.level * 100);
  });
</script>

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

Важно! Оба тега доступны для скринридеров — используйте их вместо самописных решений!

Стилизация: выходим за рамки стандартного вида

Хоть браузеры и рисуют свои версии, CSS позволяет кастомизировать индикаторы:

/* Стилизация progress в Chrome */
progress {
  height: 20px;
  border-radius: 10px;
}

progress::-webkit-progress-bar {
  background-color: #f0f0f0;
}

progress::-webkit-progress-value {
  background: linear-gradient(to right, #ff5e62, #ff9966);
}

/* Стилизация meter в Firefox */
meter::-moz-meter-bar {
  background: #4CAF50;
}

Поддержка браузерами и фолбэки

Оба тега поддерживаются всеми современными браузерами. Для старых версий IE можно:

1. Использовать полифиллы
2. Предоставить текстовую альтернативу (как в примерах выше)
3. Заменить на <div> с JavaScript

Где применять на практике?

• Интерфейсы загрузки (файлы, видео, страницы)
• Опросы и тесты (прогресс прохождения)
• Панели управления (использование ресурсов)
• Игровые интерфейсы (здоровье, опыт)
• Формы (степень заполненности)

Попробуйте добавить эти теги в свой проект — они сделают интерфейс информативнее без лишнего JavaScript! 🎨