Прогресс и метрики (progress, meter)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 23
Автор
Рек. время прохождения 3 минуты
Упражнений 9
Комментарии 0
Тренажер HTML
Семантические элементы `<progress>` и `<meter>` помогают не только визуализировать данные, но и придают им правильное значение. Это важно для поисковых систем и специальных возможностей. Элемент `<progress>` идеально подходит для отображения процесса выполнения задачи, например, загрузки файла или прохождения теста. В отличие от него, `<meter>` используется для измерения данных в известном диапазоне, как уровень заряда батареи, свободное место на диске или надежность пароля. В этих заданиях мы разберемся, как использовать оба тега, изучим их атрибуты и научимся выбирать подходящий элемент для каждой конкретной ситуации.
Список тем

Индикатор неопределенного процесса

id: 37874_html-progress-meter-1

Создайте индикатор выполнения для задачи, у которой неизвестно точное время завершения, например, 'Поиск обновлений...'. Браузер должен отобразить анимированный индикатор, показывающий, что процесс идет.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
  color: #333;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
progress, meter {
  width: 100%;
  height: 25px;
}
HTML
<label>Поиск обновлений...</label>
<br>
input1
Для отображения процесса выполнения задачи используется тег `<progress>`. Если у этого тега отсутствует атрибут `value`, он переходит в неопределенное (indeterminate) состояние и показывает анимацию, а не конкретное значение. Вам нужно написать полный тег: `<progress></progress>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Завершенность на 70%

id: 37874_html-progress-meter-2

Теперь создайте индикатор, который четко показывает, что задача выполнена на 70%. Для этого нужно указать текущее и максимальное значения.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
  color: #333;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
progress, meter {
  width: 100%;
  height: 25px;
}
progress::-webkit-progress-bar {
  background-color: #e0e0e0;
  border-radius: 5px;
}
progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 5px;
}
HTML
<label>Прогресс установки: 70%</label>
<br>
<progress input1="70" input2="100"></progress>
Используйте тег `<progress>`. Чтобы задать конкретное значение, добавьте атрибут `value` с текущим прогрессом и атрибут `max` с общим объемом работы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Измеритель уровня заряда

id: 37874_html-progress-meter-3

Используйте подходящий семантический тег, чтобы показать уровень заряда батареи, равный 65%. Это статическое измерение, а не динамический процесс.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
  color: #333;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
progress, meter {
  width: 100%;
  height: 25px;
}
HTML
<label>Уровень заряда батареи: 65%</label>
<br>
<input1 value="0.65"></input1>
Для скалярных измерений в известном диапазоне, таких как заряд батареи, используется тег `<meter>`. Его значение можно задать в виде дроби (от 0 до 1) через атрибут `value`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Термометр в комнате

id: 37874_html-progress-meter-4

Создайте измеритель для отображения температуры. Текущее значение — 22°C, а отображаемый диапазон — от 0°C до 50°C.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
  color: #333;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
progress, meter {
  width: 100%;
  height: 25px;
}
HTML
<label>Температура в комнате: 22°C</label>
<br>
<meter input1="0" input2="50" input3="22"></meter>
У тега `<meter>` есть атрибуты `min` и `max` для установки границ диапазона, а `value` — для указания текущего значения внутри этого диапазона.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Индикатор дискового пространства

id: 37874_html-progress-meter-5

Покажите использование дискового пространства: занято 250ГБ из 1000ГБ. Система должна считать уровень ниже 300ГБ 'низким', а выше 800ГБ 'высоким'. Обратите внимание, как изменится цвет индикатора.

CSS
body{font-family:sans-serif;padding:15px;background-color:#f4f7f9;color:#333}label{display:block;margin-bottom:8px;font-weight:700}progress,meter{width:100%;height:25px}meter::-webkit-meter-bar{background-color:#e0e0e0;border-radius:5px}meter::-webkit-meter-optimum-value{background:#4caf50}meter::-webkit-meter-suboptimum-value{background:#ffeb3b}meter::-webkit-meter-even-less-good-value{background:#f44336}
HTML
<label>Место на диске: 250ГБ из 1000ГБ</label>
<br>
<meter min="0" max="1000" value="250" input1="300" input2="800"></meter>
Используйте атрибуты `low` и `high`, чтобы разделить диапазон на три части: низкую, среднюю и высокую. Браузеры автоматически меняют цвет индикатора в зависимости от того, в какую часть попадает `value`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Оптимальное значение

id: 37874_html-progress-meter-6

Создайте индикатор качества сигнала Wi-Fi (95 из 100). Оптимальным значением является 100. Это должно быть отражено в коде, чтобы браузер показал 'хороший' (зеленый) результат.

CSS
body{font-family:sans-serif;padding:15px;background-color:#f4f7f9;color:#333}label{display:block;margin-bottom:8px;font-weight:700}progress,meter{width:100%;height:25px}meter::-webkit-meter-bar{background-color:#e0e0e0;border-radius:5px}meter::-webkit-meter-optimum-value{background:#4caf50}meter::-webkit-meter-suboptimum-value{background:#ffeb3b}meter::-webkit-meter-even-less-good-value{background:#f44336}
HTML
<label>Качество сигнала Wi-Fi: 95%</label>
<br>
<meter min="0" max="100" low="40" high="80" value="95" input1="100"></meter>
Атрибут `optimum` указывает идеальное значение в диапазоне. Если `value` близко к `optimum` и находится в 'высокой' зоне (выше `high`), индикатор будет 'хорошим'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Неоптимальное значение

id: 37874_html-progress-meter-7

Теперь создайте индикатор уровня загрязнения воздуха (AQI), где низкие значения — это хорошо. Текущее значение 120, а оптимальное — 25. Посмотрите, как `optimum` влияет на цвет, когда значение далеко от идеала.

CSS
body{font-family:sans-serif;padding:15px;background-color:#f4f7f9;color:#333}label{display:block;margin-bottom:8px;font-weight:700}progress,meter{width:100%;height:25px}meter::-webkit-meter-bar{background-color:#e0e0e0;border-radius:5px}meter::-webkit-meter-optimum-value{background:#4caf50}meter::-webkit-meter-suboptimum-value{background:#ffeb3b}meter::-webkit-meter-even-less-good-value{background:#f44336}
HTML
<label>Уровень загрязнения воздуха (AQI): 120</label>
<br>
<meter min="0" max="300" low="50" high="150" value="120" input1="25"></meter>
Даже если значение находится в 'среднем' диапазоне (между `low` и `high`), браузер будет считать его 'субоптимальным' (желтым), потому что оно далеко от `optimum`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связывание метки и индикатора

id: 37874_html-progress-meter-8

Правильно свяжите текстовую метку 'Прогресс загрузки' с элементом `<progress>`. Это улучшает доступность для пользователей программ чтения с экрана.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
  color: #333;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
progress, meter {
  width: 100%;
  height: 25px;
}
HTML
<label input1="upload-progress">Прогресс загрузки:</label>
<progress input2="upload-progress" value="45" max="100"></progress>
Чтобы связать `<label>` с элементом, используйте атрибут `for` у метки. Его значение должно быть таким же, как значение атрибута `id` у связываемого элемента (`<progress>`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Итоговый тест: надежность пароля

id: 37874_html-progress-meter-9

Создайте полноценный индикатор надежности пароля. Он должен показывать текущую оценку 80 из 100. Значения ниже 33 — 'плохие', выше 66 — 'хорошие', а 100 — идеальный результат.

CSS
body{font-family:sans-serif;padding:15px;background-color:#f4f7f9;color:#333}label{display:block;margin-bottom:8px;font-weight:700}progress,meter{width:100%;height:25px}meter::-webkit-meter-bar{background-color:#e0e0e0;border-radius:5px}meter::-webkit-meter-optimum-value{background:#4caf50}meter::-webkit-meter-suboptimum-value{background:#ffeb3b}meter::-webkit-meter-even-less-good-value{background:#f44336}
HTML
<label for="pass-strength">Надежность пароля:</label>
<input1 id="pass-strength" min="0" max="100" low="33" high="66" value="80" input2="100"></input1>
Соберите все знания о теге `<meter>`. Вам понадобится сам тег, чтобы создать измеритель, и атрибут `optimum` для определения идеального значения. Все остальные данные уже на месте.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру