Тег <progress>

Тег <progress> создаёт индикатор выполнения задачи. Обычно выглядит как прогресс-бар.

<p>

Подождите, пожалуйста, файл загружается

</p>

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

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

💡Если пользователю надо показать числовое значение в заданном диапазоне, лучше использовать тег <meter>.

- сообщить о количестве свободного места на диске;

- вывести допустимые пределы громкости;

- показать уровень загруженности интернет-канала.

- max — максимальное значение. Должно быть положительным, допускаются дробные значения. По умолчанию равно 1.

- value — текущее значение. Положительное число, допускаются дробные значения. Должно находится в пределах между 0 и значением атрибута max. Также его можно менять при помощи JavaScript. Если атрибут не прописан, то линия внутри прогресс-бара будет перемещаться от одного края к другому, показывая, что задача выполняется, но не известно, сколько это займёт времени.