Создание шкалы прогресса

У элемента <progress> нет обязательных атрибутов, поэтому для создания шкалы прогресса достаточно использовать открывающий и закрывающий теги.

<progress></progress>

Закрывающий тег </progress> обязателен.

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

<progress value="12" max="100">Задача выполнена на 12%</progress>

Шкала прогресса бывает двух видов:

1. шкала в неопределённом состоянии;
2. шкала со значением.

Шкала в неопределённом состоянии

Если для <progress> не задан атрибут value, то шкала прогресса находится в неопределённом состоянии, показывая что неясно, сколько ещё осталось до завершения задачи. Вот как выглядит такая шкала прогресса.

Шкала со значением

Традиционная шкала требует наличия атрибута value, значение которого может быть от 0 до 1. К примеру, значение 0.5 говорит, что задача выполнена на 50%.

Если добавить атрибут max, то значение value можно указывать в более привычных величинах.

Здесь шкала прогресса идёт от 0 до 100 и значение 50 для атрибута value соответствует 50%.

Значение value не должно превышать значение max.

Итоги

• Для создания шкалы прогресса применяется элемент <progress>.
• У него два необязательных атрибута:
  • max — указывает максимально возможное значение прогресса;
  • value — текущее значение прогресса.
• Если атрибут value не добавлен, то шкала прогресса будет находиться в неопределённом состоянии, показывая что время завершения задачи не известно.

Перейти к заданиям