<progress>: Elemento PROGRESS
Última atualização: 2026-10-13
<progress>Elemento PROGRESS
Mostra a conclusão de uma tarefa (ex.: upload, carregamento) via value/max; omita value para uma animação de progresso indeterminado.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </progress> tag |
| Status | Padrão |
📝 Sintaxe
<progress value="70" max="100">70%</progress>
⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
value | Amount completed; omit for indeterminate progress. | |
max | Total task amount, default 1. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador | |||||
|---|---|---|---|---|---|
| <progress> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica: progress é para progresso de tarefa; para medição de intervalo fixo use <meter>.
❓ Perguntas Frequentes
QO que acontece se progress ficar sem value?
ASem
value, o progresso é «indeterminado» — o navegador exibe uma animação deslizante, adequada a «em processamento, porcentagem desconhecida». Com value (entre 0 e max), mostra a barra de progresso determinada.QQual é o valor padrão do atributo max de progress?
AO max padrão é 1; nesse caso,
value='0.5' significa 50%. Com max='100', o value vai direto de 0 a 100, semanticamente mais claro. Valores acima do max são limitados ao max.QO estilo de progress pode ser personalizado?
ASim, mas com pseudoelementos prefixados: no WebKit,
progress::-webkit-progress-bar e progress::-webkit-progress-value; no Firefox, progress::-moz-progress-bar. Uniformizar entre navegadores custa caro; para demandas complexas, considere desenhar a barra só com CSS.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.