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

Синтаксис тега <progress>

<progress value="50" max="100"></progress>

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

Тег <progress> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <progress> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Отображение прогресса загрузки страницы, текущее значение которого равно 50%:

<p>Страница загружается:</p>
<progress value="50" max="100"></progress>

Отображение прогресса выполнения задачи, текущее значение которого равно 75%:

<p>Задача выполняется:</p>
<progress value="75" max="100"></progress>

Для чего использовать тег <progress>

  • Отображение процесса загрузки страницы или контента, например, с помощью JavaScript, когда обновление страницы происходит асинхронно.
  • Отображение процесса заполнения формы, например, при регистрации на сайте.
  • Отображение прогресса выполнения длительной операции, например, при загрузке большого файла.
  • Отображение уровня выполненной работы на сайте, например, при обучении онлайн-курсов.
  • Отображение прогресса выполнения игры, например, при прохождении уровней.

Атрибуты тега <progress>

  • value — текущее значение индикатора прогресса.
  • max — максимальное значение, которое может быть достигнуто процессом.

Глобальные атрибуты

Тег <progress> поддерживает все глобальные атрибуты HTML.

Ограничения

  • Не рекомендуется использовать тег <progress> для отображения прогресса, который можно получить с помощью CSS-анимации или других средств.
  • Тег <progress> не поддерживается в старых версиях браузеров, таких как Internet Explorer 11 и более ранних версиях. В таких случаях можно использовать JavaScript-решение для создания индикатора прогресса.

Нюансы

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

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

Тег <progress> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Если тег <progress> не подходит для задачи, то можно использовать теги <meter> или <div>.

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

Тег <div> можно использовать в сочетании с CSS для создания индикатора прогресса.

Чем заменить тег

Вместо тега <progress> можно использовать альтернативные теги, описанные выше.

Актуальность

Тег <progress> актуален и используется в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023