Элемент <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>
поддерживается во всех основных браузерах.