<progress>: Элемент индикатора выполнения

HTML-элемент <progress> отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).

Категории контента Потоковый контент, фразовый контент, контент, ассоциированный с  label, явный контент.
Разрешенный контент Фразовый контент, но среди его потомков не должно быть элемента <progress>.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Разрешенные родители Любой элемент, который принимает фразовый контент.
Разрешенные ARIA роли Нет
DOM интерфейс HTMLProgressElement

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

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

Примечание: Минимальное значение всегда 0,  а атрибут min недопустим для прогресс-элемента. Вы можете использовать свойство CSS -moz-orient, чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.

Примечение: Псевдокласс :indeterminate может быть использован для работы с неопределенным индикатором выполнения. Чтобы индикатор выполнения стал неопределенным после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute("value")

Примеры

<progress value="70" max="100">70 %</progress>

Result

Для Windows 7, результат выполнения будет выглядеть так :

progress-firefox.JPG

Дополнительные примеры

Смотрите -moz-orient.

Спецификации

Спецификация Статус Комментарии
HTML Living Standard
Определение '<progress>' в этой спецификации.		 Живой стандарт  
HTML5
Определение '<progress>' в этой спецификации.		 Рекомендация Первое определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
progressChrome Полная поддержка 6Edge Полная поддержка 12Firefox Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Замечания Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.
IE Полная поддержка 10Opera Полная поддержка 11Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Замечания Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.
Opera Android Полная поддержка 11Safari iOS Полная поддержка 7
Замечания
Полная поддержка 7
Замечания
Замечания Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
Samsung Internet Android Полная поддержка Да
maxChrome Полная поддержка 6Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 11Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка 11Safari iOS Полная поддержка 7Samsung Internet Android Полная поддержка Да
valueChrome Полная поддержка 6Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 11Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android Полная поддержка 11Safari iOS Полная поддержка 7Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

Смотрите также