HTML тег <progress>

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

Синтаксис

<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.

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

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

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

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

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

Учебник HTML

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