HTML Academy · Урок

Элементы progress и meter

Отображайте завершённость и измеряемые значения с помощью встроенных средств HTML

«Элементы progress и meter» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Элемент progress

Элемент <progress> обозначает выполнение задачи:

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

Неопределённый progress

Если атрибут value не указан, progress отображается в виде неопределённой анимации:

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

Анимация progress с помощью JavaScript

Динамически обновляйте progress:

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

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

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

Элемент измерения

Элемент <meter> отображает скалярное значение в известном диапазоне:

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

Атрибуты измерителя

У измерителя есть несколько атрибутов для задания оптимального диапазона и диапазона предупреждения:

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

Цветовые состояния измерителя

Браузеры выбирают цвет измерителя на основе нижней, верхней и оптимальной границ:

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

Использование диска с помощью измерителя

Классический вариант использования измерителя: объём занятого диска или памяти:

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

Показатель strength пароля с помощью измерителя

Используйте измеритель для отображения strength пароля:

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

Стилизация progress и измерителя

Пользовательская стилизация progress и измерителя:

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

Доступность progress

Добавьте атрибуты ARIA для улучшения поддержки программ чтения с экрана:

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

Кратко: progress и измеритель

Ключевое различие:

<progress> — выполнение задачи с течением времени; значение увеличивается до max; может быть неопределённым
<meter> — статическое скалярное измерение; значение уже известно; есть зоны low, high и optimum

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

Рекомендации по вариантам использования:

progress — загрузка файла, пошаговое заполнение формы, индикатор загрузки
meter — использование диска, указатель уровня топлива, кредитный рейтинг, уровень заряда батареи, релевантность результата поиска

Быстрая проверка

Какой элемент подходит для отображения заполненности жёсткого диска?

Повторение: progress и измеритель

Основные сведения о progress и измерителе:

<progress max value> — выполнение задачи; без value состояние неопределённое
<meter min max low high optimum value> — статическое измерение
Браузер автоматически выбирает цвет измерителя на основе положения optimum
Добавьте aria-valuenow/min/max для поддержки программ чтения с экрана

Часто задаваемые вопросы

Урок «Элементы progress и meter» бесплатный?

Да — полный текст урока «Элементы progress и meter» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элементы progress и meter»?

Отображайте завершённость и измеряемые значения с помощью встроенных средств HTML Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Элементы progress и meter»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy