progress

o elemento HTML progress (<progress>) é usado para visualizar o progresso de uma tarefa. Embora as especifidades de como é mostrado ficam a cargo do desenvolvedor, tipicamente, é mostrado como uma barra de progresso.

Contexto de uso

Conteúdo permitido Conteúdo de texto
Omissão de Tag Nenhum, ambas as tags (abertura e encerramento) são obrigatórias
Elemento pai permitido Conteúdo fraseado (phrasing content), mas não deve haver descendentes do elemento progress
Documento normativo HTML5, seção 4.10.16

Atributos

Como todos os outros elementos HTML, este elemento tem os atributos globais (global attributes)

max
Este atributo descreve quanto trabalho é demandado pela tarefa indicada pelo elemento progress.
value
Este atributo especifica quanto da tarefa foi concluído. Se este não existir, a barra de progresso é indeterminada; isso indica que uma atividade está em progresso sem previsão de quanto tempo é esperado para que seja concluída.

Você pode usar a propriedade orient para especificar se a barra de progresso deve ser renderizada horizontalmente (padrão) ou verticalmente. A pseudo-classe :indeterminate pode ser associada a barras de progresso indeterminadas.

Interface DOM

Este elemento implementa a interface HTMLProgressElement.

Exemplos

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

Resultado

View Live Examples

No Mac OS X, o progresso resultante deve aparecer assim:

progress-1.png

No Windows, o progresso resultante deve aparecer assim:

progress-firefox.JPG

Exemplos adicionais

Veja orient.

Compatibilidade de Browsers

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
progressChrome Full support 6Edge Full support YesFirefox Full support 6
Notes
Full support 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes 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 Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 6
Notes
Full support 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes 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 Full support 11Safari iOS Full support 7
Notes
Full support 7
Notes
Notes Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
Samsung Internet Android Full support Yes
maxChrome Full support 6Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 6Opera Android Full support 11Safari iOS Full support 7Samsung Internet Android Full support Yes
valueChrome Full support 6Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 6Opera Android Full support 11Safari iOS Full support 7Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Veja também