Элемент <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 отсутствует.

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

Как и все другие HTML-теги, тег <progress> поддерживает все глобальные атрибуты в HTML5.

Атрибуты для событий

Тег <progress> так же поддерживает атрибуты событий в HTML5.

Поддержка браузеров

Тег <progress> поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.