Progress
Barra de progresso que mostra quanto de uma tarefa já foi feito, como um envio, uma exportação ou uma configuração. Para uma medida que só fica dentro de uma faixa, como o armazenamento usado, use o Meter.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. O estilo carregado cuida do visual.
import { Progress } from "@camaleo/react";Anatomia
Uma raiz com um cabeçalho (rótulo e valor) e um trilho com o preenchimento. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Duração desconhecida
Quando ainda não dá para medir o trabalho, passe value={null}. O número some, um trecho desliza pela trilha (com movimento reduzido, ele pulsa no lugar) e o leitor de tela entende que a barra está ocupada, não parada em 0%.
Etapa por etapa
Clique para avançar. Dizer a etapa atual no valueLabel mostra o que está acontecendo, e não só quanto falta.
Quantidade em vez de porcentagem
Use o total real em max e mostre "16 de 20 fotos". Itens são mais fáceis de entender do que uma porcentagem.
Etapas de uma configuração
Num assistente curto, value={3} com max={5} vira "Etapa 3 de 5", e a pessoa sabe quanto falta.
O que o leitor de tela ouve
O valueLabel muda só o texto visível. Passe também o getAriaValueText, para "1,2 de 3 GB" ser lido por extenso, e não como "40 por cento".
- contrato-assinado.pdfConcluído
- fotos-da-obra.zip18 de 40 MB
- orcamento-2026.xlsxNa fila
Lista de envios
Uma barra por arquivo, cada uma com o nome dele, para a pessoa ver qual terminou, qual está enviando e qual está na fila.
Com opção de cancelar
Clique. Tarefa longa precisa de uma saída. Depois de cancelar, diga o que aconteceu numa mensagem de status e ofereça tentar de novo.
Em contexto
A barra de progresso fica junto da tarefa que ela acompanha. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Fila de envio
Complete seu perfil
Adicione seu telefone e confirme os dados da empresa para emitir notas.
Importar contatos
contatos-crm.csv · 3.000 linhas
Boas práticas
"Baixando a atualização 4.2" mostra pelo que a pessoa está esperando e ainda dá nome à barra para o leitor de tela.
Baixando o quê? Sem nome e sem valor, ninguém sabe se vale a pena esperar.
Se não dá para medir o trabalho, use value={null} em vez de chutar um número.
Uma barra que corre até 99% e para ali quebra a confiança. A pessoa desiste de uma barra em que não acredita.
Props
min e max. null quer dizer que a duração é desconhecida.As outras props da raiz de progresso do Base UI e os atributos nativos de <div> passam direto.
Styling hooks
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Renderiza role="progressbar" com aria-valuenow, aria-valuemin e aria-valuemax, e o rótulo vira o nome acessível.
- Por padrão, o leitor de tela ouve a porcentagem. Quando o valor visível é uma quantidade ou um tamanho, passe o getAriaValueText para os dois dizerem a mesma coisa.
- Com value={null}, o aria-valuenow fica de fora, o que avisa a tecnologia assistiva que a duração é desconhecida.
- O leitor de tela não anuncia cada mudança. Quando a tarefa terminar ou falhar, avise numa mensagem de status (role="status").