progress

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

html
<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 com navegadores

BCD tables only load in the browser

Veja também