HTML-тег <progress>

Элемент <progress> показывает ход выполнения задачи.

Этот элемент обычно используется для указания объема выполненной задачи, такой как загрузка чего-либо на странице или процесс регистрации. Обычно отображается в виде индикатора выполнения и часто помечается в процентах от 0 до 100%.

Тип:	Inline
Контент:	Inline и текст, но `<progress>` среди его потомков
Открывающий тег:	Обязательный
Закрывающий тег:	Обязательный
Версия:	Новый в HTML5

Синтаксис

Базовый синтаксис тега <progress> выглядит следующим образом:

HTML / XHTML: <progress> ... </progress>

Примеры написания кода тега <progress>:

<h2>Прогресс задачи</h2>
<p>Прогресс: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
    var i = 0;
    var progressBar = document.getElementById("bar");
    function countNumbers(){
        if(i < 100){
            i = i + 1;
            progressBar.value = i;
            // Для браузеров, которые не поддерживают тег progress 
            progressBar.getElementsByTagName("span")[0].textContent = i;
        }
        // Ждем, прежде чем снова запустить этот скрипт
        setTimeout("countNumbers()", 500);
    }
    countNumbers();
</script>

Элемент <progress> обычно используется вместе с JavaScript для отображения хода выполнения задачи. Этот элемент не должен использоваться для представления датчика. Чтобы представить датчик, используйте вместо него тег <meter>.

Специальные атрибуты тега

В следующей таблице приведены атрибуты, которые относятся к тегу <progress>:

Атрибут	Значение	Описание
`max`	number	Определяет, сколько работы в общей сложности требует задача.
`value`	number	Определяет, сколько задачи было выполнено. Это должно быть допустимое число с плавающей запятой между 0 и max, или между 0 и 1, если атрибут max отсутствует.