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:

progress-1.png

Exemplos Adicionais

Veja orient.

Compatibilidade dos Browsers

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.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores para esta página: teoli, gustavowiller, Leandro Mercês Xavier
 Última atualização por: teoli,