Introduced in HTML5
Resumo
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
No Mac OS X, o progresso resultante deve aparecer assim:
No Windows, o progresso resultante deve aparecer assim:
Exemplos adicionais
Veja orient.
Compatibilidade de Browsers
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Suporte básico | 6.0 | 6.0 (6.0) | 10 | 11.0 | Nightly build |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suporte básico | Não suportado | 6.0 (6.0) | Não suportado | 11.0 | Não suportado |
Gecko notes
O Gecko fornece o pseudo-elemento ::-moz-progress-bar, que permite que você customize a parte interior da barra de progresso, que representa a fração concluída do processo em determinado momento.
Até o Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), o elemento <progress> estava incorretamente classificado como um elemento de formulário, possuindo assim um atributo de formulário. Este erro foi corrigido.