<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.

CategoriaFormulários
Modelo de ConteúdoConteúdo de fluxo
Pais PermitidosQualquer elemento que aceite conteúdo de fluxo
Tag de FechamentoSim — requer fechamento </progress> tag
StatusPadrão

📝 Sintaxe

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

⚙️ Atributos

Este elemento suporta os atributos globais mais os seguintes:

AtributoValorDescrição
valueAmount completed; omit for indeterminate progress.
maxTotal task amount, default 1.

▶ Exemplo

Edite o código abaixo e veja o resultado em tempo real no playground:

🌐 Suporte de Navegadores

Navegador ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<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.
Mais estudos de caso em breve — volte mais tarde.

📚 Tutoriais Relacionados

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%