Кратко
СкопированоТег <progress>
создаёт индикатор выполнения задачи. Обычно выглядит как прогресс-бар.
Пример
Скопировано<p>Подождите, пожалуйста, файл загружается</p><progress value="30" max="100"></progress>
<p>Подождите, пожалуйста, файл загружается</p> <progress value="30" max="100"></progress>
Как понять
СкопированоТег <progress>
стоит использовать для вывода информации о процессе, который выполняется и должен завершиться: прогресс загрузки файла, процесс соединения абонентов, длительность таймера.
- сообщить о количестве свободного места на диске;
- вывести допустимые пределы громкости;
- показать уровень загруженности интернет-канала.
Как пишется
Скопированоmax
— максимальное значение. Должно быть положительным, допускаются дробные значения. По умолчанию равно 1.value
— текущее значение. Положительное число, допускаются дробные значения. Должно находится в пределах между 0 и значением атрибутаmax
. Также его можно менять при помощи JavaScript. Если атрибут не прописан, то линия внутри прогресс-бара будет перемещаться от одного края к другому, показывая, что задача выполняется, но не известно, сколько это займёт времени.
К тегу <progress>
применимы все глобальные атрибуты.
На практике
Скопированосоветует Скопировано
🛠 Внешний вид элемента <progress>
может быть разным — это зависит от браузера и операционной системы устройства пользователя. Вот так стандартный прогресс-бар будет выглядеть на устройствах с macOS и Windows:

Если надо чтобы прогресс-бар выглядел везде одинаково, то нужно стилизовать его. Например, следующее правило убирает границу элемента, которая есть по умолчанию, и меняет цвет фона:
progress { border: none; background-color: #5068f6;}
progress { border: none; background-color: #5068f6; }
Но в Firefox эти стили не затронут бегунок, поэтому дополнительно потребуется использовать вендорный префикс -moz
. А вот для стилизации в Chrome и Safari как самого элемента, так и его бегунка, необходимо использовать префиксы -webkit
.
Поэтому для того, чтобы прогресс-бар и бегунок выглядели одинаково во всех основных браузерах, нам потребуется добавить следующие правила:
progress::-moz-progress-bar { border: none; background-color: #5068f6;}progress::-webkit-progress-bar { border: none; background-color: #5068f6;}progress::-webkit-progress-value { background-color: #5068f6;}
progress::-moz-progress-bar { border: none; background-color: #5068f6; } progress::-webkit-progress-bar { border: none; background-color: #5068f6; } progress::-webkit-progress-value { background-color: #5068f6; }