ProgressCircle
Progresso circular — um anel que mostra quanto uma tarefa já avançou, do tamanho certo para cards, blocos e barras de ferramentas. Quando houver espaço para uma barra inteira, use Progress.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { ProgressCircle } from "@camaleo/react";Anatomia
Uma raiz com o papel progressbar guarda o anel (um SVG com a trilha e o arco, e o valor por cima) e um rótulo opcional embaixo. 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 marca da barra acima.
Travada ou com falha
Use tone="warning" quando a tarefa travar e tone="danger" quando ela falhar. Diga o motivo no rótulo também, para a cor não ser o único sinal.
Tamanhos
Mude size e strokeWidth juntos. Um traço fino num anel grande fica apagado, e um grosso num anel pequeno aperta o número.
Duração desconhecida
Passe value={null} quando ainda não der para medir o trabalho: o número some e o arco gira (ele pulsa com movimento reduzido). Deixar value de fora não é a mesma coisa, significa 0%.
Contagem em vez de porcentagem
Defina max com o total real e mostre "3/5" em valueLabel. O getAriaValueText dá ao leitor de tela as palavras, "3 de 5 aulas", em vez de "60%".
Anel pequeno ao lado do texto
Abaixo de uns 40 px o número não cabe. Esconda-o com showValue={false}, escreva o valor ao lado do anel e dê um nome a ele com aria-label.
Uma medida, não uma tarefa
O armazenamento usado nunca caminha para "concluído". Passe role="meter" para o leitor de tela não anunciar isso como uma tarefa em andamento.
Avise quando terminar
Clique até terminar. O leitor de tela não anuncia cada mudança do anel, então uma mensagem com role="status" avisa quando todas as fotos chegaram.
Em contexto
O anel cabe onde uma barra ficaria larga demais: ao lado de um título, num card ou numa fileira de metas. Estas são peças inteiras de interface que você pode copiar, no estilo que escolheu.
Enviando para o Drive compartilhado
4 de 6 arquivos · cerca de 1 minuto restante
Atividade de hoje
Quarta-feira, 28/10/2026
TypeScript para quem usa React
Próxima aula: componentes genéricos
Boas práticas
"Importando contatos" diz à pessoa o que ela está esperando, e vira o nome acessível do anel.
40% de quê? Sem rótulo, a pessoa não sabe qual tarefa ele acompanha, e o leitor de tela só diz "Progresso".
Um anel vermelho ao lado de "O envio falhou" leva a pessoa direto ao que precisa dela.
Uma configuração de perfil em 25% é normal. Vermelho ali ensina a pessoa a ignorar o vermelho quando algo quebrar de verdade.
Props
min e max (limitado a eles). null indica duração desconhecida e o anel gira; deixar de fora significa 0.warning quando a tarefa trava, danger quando falha.aria-label exista. Sem nenhum dos dois, o nome é "Progresso" (ou o texto do MessagesProvider).value é null.getAriaValueText.aria-valuetext). Recebe a porcentagem mostrada (como "40%") e o valor, os dois null enquanto indeterminado. Padrão: o valueLabel quando é string; senão, a porcentagem.Os atributos nativos de <div> são repassados, como aria-label, aria-valuetext e role.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio anel.
Atributos
Tokens que ele lê
Cor
Tipografia e movimento
Acessibilidade
- Renderiza role="progressbar" com aria-valuenow, aria-valuemin e aria-valuemax. O label dá o nome (qualquer conteúdo, não só string); sem label nem aria-label, o nome é só "Progresso", vindo do MessagesProvider.
- O leitor de tela ouve a porcentagem, ou o valueLabel quando é string. Quando não é, ou quando o texto visível é curto como "3/5", passe getAriaValueText para o leitor de tela ouvir a frase inteira.
- Com value={null}, aria-valuenow fica de fora, o que avisa a tecnologia assistiva que a duração é desconhecida.
- As mudanças não são anunciadas. Quando a tarefa terminar ou falhar, diga isso numa mensagem de status (role="status").