Como ele é
Lembra o anel de atividade de um relógio inteligente. Um círculo de traço grosso e pontas arredondadas começa no topo e se preenche no sentido horário na cor de destaque, anil por padrão, até a porcentagem do valor; o restante do caminho aparece como uma trilha cinza clara, separada do arco por pequenos respiros. Quando o valor muda, o arco desliza até a nova posição em um segundo, por padrão. No centro, o número aparece em fonte grande e seminegrita. Acima de 90 por cento, a trilha cinza some e fica só o arco colorido.
Você pode estar procurando isto se pediu algo assim
- círculo que vai se preenchendo até a porcentagem da meta
- anel de progresso igual ao do relógio da Apple para o meu painel
- mostrar quanto do curso a pessoa já concluiu num gráfico redondo
- indicador circular de KPI com o número no meio
- barra de progresso redonda que anima quando o valor muda
- medidor simples de porcentagem para a tela de onboarding
Também chamado de
- barra de progresso circular
- circular progress bar
- anel de progresso
- progress ring
- gauge circular
- donut de porcentagem
- radial progress
Quando usar
- Painéis com KPIs e metas mensais
- Progresso de curso, trilha ou certificação
- Etapas de onboarding ou de perfil completo
- Uso de plano ou de armazenamento, como espaço ocupado
Quando evitar
- Comparar vários valores lado a lado, em que barras ou gráficos leem com mais clareza
- Fundos escuros sem trocar a cor da trilha, que por padrão é um preto translúcido quase invisível
Como pedir para a sua IA
Crie um anel de progresso circular em SVG para os KPIs do meu painel: o arco se preenche com animação suave até o valor, com o número formatado e o símbolo de porcentagem no centro, cores da minha marca, rótulo acessível para leitores de tela e versão estática para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Transferidor
O número de Transferidor já vem com o símbolo de porcentagem?
Não. Transferidor mostra no centro o valor calculado entre mínimo e máximo, sem o símbolo e sem arredondar, então frações aparecem com casas decimais. Peça à IA para arredondar, acrescentar o símbolo e formatar em pt-BR, e também para marcar o anel como barra de progresso para leitores de tela, o que o componente não declara.
Dá para trocar as cores e a espessura de Transferidor?
Dá. Transferidor recebe por props a cor do arco, a cor da trilha, a espessura do traço e a duração da animação, além do mínimo e do máximo da escala. O tamanho padrão é de 10rem e muda por classe. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto.
Transferidor respeita quem prefere menos movimento?
O componente original sempre anima o arco quando o valor muda. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a preferência de reduzir movimento, o que em Transferidor é simples: desligar a transição do traço e mostrar o arco já no valor final.
