<progress> - HTML-елемент індикатора прогресу

HTML-елемент <progress> відображає індикатор, що показує хід виконання завдання. Зазвичай він візуалізується як індикатор прогресу.

Елемент <progress> використовується для відображення прогресу виконання завдання, наприклад, завантаження файлу, обробки даних або будь-якої іншої тривалої операції.

Браузери візуалізують <progress> як горизонтальний індикатор. Важливо пов'язувати індикатор прогресу з текстом, що його описує, за допомогою елемента <label> для покращення доступності.

Не використовуйте <progress> для позначення статичного вимірювання (наприклад, використання дискового простору). Для цього існує елемент <meter>.

HTML
<progress value="70" max="100"></progress>

Атрибути

Цей тег може мати глобальні атрибути.

value: Поточне значення прогресу. Це має бути число між 0 та значенням атрибута max. Якщо атрибут value відсутній, індикатор прогресу переходить у невизначений стан (indeterminate), показуючи, що завдання виконується, але його прогрес невідомий.
max: Максимальне значення. Якщо не вказано, за замовчуванням дорівнює 1.

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, відчутний контент.
Дозволений вміст	Фразовий контент, але без нащадків `<progress>`.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає фразовий контент.
Роль ARIA	`progressbar`
DOM інтерфейс	`HTMLProgressElement`

Приклади використання

<label for="file">Завантаження файлу:</label>
<progress id="file" max="100" value="70"> 70% </progress>

<p>Обробка даних...</p>
<progress></progress>

Стилі за замовчуванням

CSS
progress {
  /* Стилі залежать від браузера */
  /* Приклад для Webkit (Chrome, Safari) */
  -webkit-appearance: progress-bar;
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  width: 10em;
  vertical-align: -0.2em;
  border: 1px solid #A9A9A9;
  color: #0063a3;
}

Підтримка браузерів



`<progress>`
`max`
`value`