# Transferidor

Um anel que se preenche com animação até a porcentagem da meta, com o número no centro.

> Transferidor é um componente do THM Componentes que mostra um valor como um anel de progresso em SVG: o arco colorido cresce ou encolhe com transição suave sempre que o valor muda, e o número aparece no centro. É leve, aceita mínimo e máximo próprios e funciona em painéis de KPI, metas, cursos e onboarding.

- Categoria: Dados e visualização
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/transferidor/

## 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

```text
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.

## Componentes relacionados

- [Manômetro](https://vibecode.thmtecnologia.com/componentes/manometro/): Medidores em arco com faixas verde, âmbar e vermelha, ponteiro que balança até parar e número contando.
- [Algarismo](https://vibecode.thmtecnologia.com/componentes/algarismo/): Número que parte do zero e corre até o valor final quando aparece na tela, como um placar.
- [Catraca](https://vibecode.thmtecnologia.com/componentes/catraca/): Números grandes que rolam como os tambores do hodômetro de um carro e param com um leve balanço.
- [Sismógrafo](https://vibecode.thmtecnologia.com/componentes/sismografo/): Gráfico de área com curva suave que recebe pontos novos a todo instante e desliza o eixo do tempo.
- [Embarque](https://vibecode.thmtecnologia.com/componentes/embarque/): Tela de espera que lista as etapas de um processo e marca cada uma como concluída enquanto avança.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.