progress

Introduced in HTML5

Resumo

O HTML progress (<progress>) é o elemento usado para mostrar o progresso de uma tarefa. Enquanto os detalhes específicos de como ele é exibido é deixado para o desenvolvedor web, é tipicamente exibido como uma barra de progresso.

Contexto de uso

Conteúdo permitido	Phrasing content
Tag omission	None, both, o inicio da tag e o final da tag são obrigatórios.
Elemento pai permitido	Phrasing content, mas não deve haver descedentes no elemento progress .
Documento normativo	HTML5, section 4.10.16

Atributos

Como todos os outros elementos HTML, este elemento possui os atributos globais.

form: This attribute specifies the form which the progress element belongs to.
max: This attribute describes how much work the task indicated by the progress element requires.
value: This attribute specifies how much of the task that has been completed. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

You can use the orient property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The :indeterminate pseudo-class can be used to match against indeterminate progress bars.

DOM interface

Este elemento implementa a interface HTMLProgressElement.

Exemplos

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

Resultado

View Live Examples

No Google Chrome, o resultado do progress parece deste modo:

Exemplos Adicionais

Veja orient.

Características	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	6.0	6.0 (6.0)	No	11	nightlies

Características	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

Gecko notes

Gecko 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.