HTML тег <progress>

Элемент <progress> (от англ. "progress" ‒ «ход, процесс») определяет индикатор прогресса выполнения задачи (прогресс-бар), отображающего, какой процент задачи (например, загрузки файла) уже выполнен. Динамические изменения в индикаторе прогресса производятся с помощью скриптов. Внешний вид элемента зависит от браузера и операционной системы и может различаться между собой.

Примечание: Текст, размещенный внутри элемента <progress> будет отображен только теми браузерами, которые не имеют поддержки данного элемента.

Примечание: Элемент <progress> не должен использоваться для определения индикатора состояния (использование дискового пространства, релевантность результатов поиска, количества результатов поиска, объема жидкости, давления и др.). Для этого используйте элемент <meter>.

Синтаксис

<progress>...</progress>

Закрывающий тег

Обязателен.

Атрибуты

valueHTML5
Указывает уже выполненную часть процесса. Это должно быть положительное число с плавающей точкой между 0 и значением атрибута max, или между 0 и 1 если атрибут не используется.

maxHTML5
Максимальное значение прогресса.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <progress> со следующими значениями CSS по умолчанию:


progress {
  height: 16px;
  width: 150px;
  border: 1px solid #000;
  color: #7BAAF7;
}
progress::-webkit-progress-bar {
  height: 16px;
  width: 150px;
  border: 1px solid #000;
  background: #fff;
}
progress::-webkit-progress-value {
  background-color: #7BAAF7;
}

Различия между HTML 4.01 и HTML5

Элемент <progress> был добавлен в HTML5.

Пример использования:

Прогресс загрузки файла:

Пример HTML:

Попробуй сам
<progress value="85" max="100">85%</progress>

Если для элемента <progress> не указывать атрибут value, то большинство браузеров будут отображать анимацию:



Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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

Учебник HTML

HTML уроки: HTML Элементы




Contema