Progress Bar HTML

Barras de progresso: comunicar que algo está acontecendo

Uma barra de progresso transforma trabalho invisível — upload, buffer de vídeo, formulário em várias etapas — em algo que o usuário vê avançar. A pesquisa de usabilidade é consistente: as pessoas aguardam muito mais por uma tarefa que parece progredir do que pela mesma tarefa representada por um spinner. Mesmo uma estimativa aproximada bate "estimativa nenhuma", e uma barra determinada bate uma indeterminada sempre que dá para calcular progresso.

O HTML tem um primitivo nativo: o elemento <progress>. Com value ele é determinado; sem, renderiza como indeterminado.

<progress value="50" max="100">50%</progress>
<progress>Carregando...</progress>

Nativo é o caminho mais barato, mas estilizar dói: cada engine traz seus pseudo-elementos (::-webkit-progress-bar, ::-webkit-progress-value, ::-moz-progress-bar) e você precisa sobrescrever todos. Para controle visual total, a maioria opta por um div custom com div interno cujo width anima via CSS transition.

Acessibilidade

Uma barra custom precisa do quarteto ARIA completo: role="progressbar" mais aria-valuenow, aria-valuemin e aria-valuemax. Atualize aria-valuenow conforme o progresso avança. No estado indeterminado, omita aria-valuenow — leitores de tela anunciam "ocupado" em vez de porcentagem. Adicione aria-label ou aria-labelledby para que a barra tenha nome ("Progresso do upload", "Conclusão do formulário").

Tipos de progresso

• Linear — o padrão; serve para uploads, downloads, buffer de vídeo.
• Circular / radial — compacto, comum em avatares inline ou widgets de dashboard.
• Por etapas (stepped) — formulários multi-step ou wizards de onboarding; mostra etapa atual e total.
• Skeleton — formas placeholder que imitam o layout final; percebidas como mais rápidas que barras em page loads.
• Indeterminada — animação listrada ou shimmer quando a duração é desconhecida.

Bibliotecas e implementação

Barras finas no topo da página normalmente usam o NProgress (aquele indicador colorido que o YouTube popularizou). Para animações mais ricas há ProgressBar.js (SVG, várias formas), react-progressbar.js e nprogress-vue. UIs de upload usam o evento progress do XMLHttpRequest ou o ReadableStream do fetch para calcular bytes-transferidos-sobre-total. Atualize o DOM dentro de requestAnimationFrame e jogue throttle em rajadas para evitar layout thrash em redes rápidas.

Truques de UX que valem ouro

A cor carrega semântica: verde para sucesso, azul para atividade neutra, amarelo para alerta, vermelho para erro. Combine a barra com ETA ou contador de etapas ("Enviando 3 de 5") — o famoso diálogo "copiar arquivo" da Microsoft descobriu que barras que ocasionalmente pausam e pulam fazem a tarefa parecer mais rápida que barras lineares perfeitas, porque o cérebro fixa nos saltos. Sempre mantenha a barra suave: um valor que diminui de repente parece bug.

Perguntas frequentes

Barra de progresso ou spinner? Barra quando você consegue medir progresso; spinner só quando a duração é mesmo desconhecida e curta. Para qualquer coisa acima de ~5 segundos, até uma barra indeterminada bate um spinner.

Dá para estilizar o <progress> nativo? Parcialmente. Estilização cross-browser exige vários pseudo-elementos e ainda assim é menos flexível que um div custom. Para UIs com identidade visual forte, vá de custom.

Atributos ARIA são realmente vitais? Sim. Sem role="progressbar" e aria-valuenow, usuários de leitor de tela não têm como saber que algo está carregando, nem quanto já avançou.

E as skeleton screens? Não são barra de progresso, são UI placeholder. Use em page loads iniciais (percepção mais rápida); use barras reais para operações mensuráveis como upload.