ProgressBar

A ProgressBar informa quanto de uma tarefa já foi feito: Pedidos recebidos numa importação de CSV, Créditos usados, passos de um fluxo longo. Para estados sem duração (publicada, atrasada) use Chip; para a posição em um fluxo de passos, Stepper.

import { Label, ProgressBar } from "@rastreio-x/ui";

Padrão

value vai de 0 a 100. ProgressBar.Output mostra o número, e Label (ou aria-label) dá o nome.

Playground

Mude o valor, a cor e o tamanho, ou ligue o modo indeterminado.

Cores

A cor reforça o estado, mas o texto o diz: nunca use só a cor.

Tamanhos

sm, md (padrão) e lg mudam a espessura da trilha.

Indeterminada

Sem total conhecido, isIndeterminate anima a barra e omite o valor.

Escala própria

minValue, maxValue e formatOptions mostram a contagem real em vez de porcentagem.

Na importação de CSV

Barra, contagem e a nota de que o processamento continua com a janela fechada.

Anatomia

• ProgressBar: o contêiner, que carrega o valor e o papel.
• ProgressBar.Output: o texto do valor.
• ProgressBar.Track e ProgressBar.Fill: a trilha e o trecho preenchido.

Propriedades

Animações

O trecho preenchido cresce com transição curta de width; no modo indeterminado a barra desliza em laço. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms e o valor aparece direto (a barra indeterminada deixa de se mover).

Acessibilidade

• Papel progressbar com aria-valuenow, aria-valuemin e aria-valuemax; no modo indeterminado, sem aria-valuenow.
• Rótulo obrigatório: Label visível ou aria-label.
• O valor é anunciado por texto, então a barra não depende da cor.
• Para mudanças importantes (concluído, falhou), acrescente uma mensagem de status à parte, em Alert ou em texto com aria-live.
• Contraste da trilha e do preenchimento acima de 3:1 sobre a superfície.

Boas práticas

• Use a cor success só quando a tarefa de fato terminou.
• Prefira determinada sempre que souber o total.
• Não use a barra para o estado de um Pedido; use Chip.

Relacionados

• Stepper para a posição em um fluxo de passos.
• Chip para o estado em texto.
• Alert para o resultado final.