Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de Progresso Radial

Última atualização:

Progresso radial Tailwind CSS somente CSS - anel de progresso circular com exibição de porcentagem. Variantes de cor e tamanho, sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes de progresso radial exibem a porcentagem de conclusão em formato circular, oferecendo uma alternativa elegante às barras de progresso lineares. Construído com visualização baseada em SVG e animações CSS, o progresso radial adiciona interesse visual aos painéis e indicadores de status. O sistema de progresso radial Frutjam oferece suporte a vários tamanhos e cores – ideal para métricas, rastreamento de conclusão e visualização de dados.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
radial-progressBaseIndicador circular de progresso orientado por --radial-progress--value
radial-progress-xsTamanhoExtra pequeno
radial-progress-smTamanhoPequeno
radial-progress-mdTamanhoMédio (padrão)
radial-progress-lgTamanhoGrande
radial-progress-xlTamanhoExtra grande
radial-progress-baseCorCor da superfície base silenciada
radial-progress-currentCorHerda explicitamente a cor do texto atual
radial-progress-primaryCorCor do tema principal
radial-progress-secondaryCorCor do tema secundário
radial-progress-accentCorCor do tema de destaque
radial-progress-neutralCorCor neutra do tema
radial-progress-infoCorCor semântica da informação
radial-progress-successCorCor semântica de sucesso
radial-progress-warningCorCor semântica de aviso
radial-progress-errorCorCor semântica do erro

Uso Básico

<div class="radial-progress" style="--radial-progress--value:70">70%</div>

1
2
3
4
function RadialProgress() {
  const progress = {"--radial-progress--value": 70}
  return <div className="radial-progress" style={progress}>70%</div>
}

Tamanhos de progresso radial

html 
1
2
3
4
5
<div class="radial-progress radial-progress-xs" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-sm" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-md" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-lg" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-xl" style="--radial-progress--value:70">70%</div>

Cores de Progresso Radial

html 
1
2
3
4
5
6
7
8
9
<div class="radial-progress radial-progress-base" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-primary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-secondary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-accent" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-neutral" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-info" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-success" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-warning" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-error" style="--radial-progress--value:70">70%</div>

Progresso radial com rótulo

html 
1
2
3
4
5
6
<div class="flex flex-col items-center gap-4">
  <div class="text-center">
    <div class="radial-progress radial-progress-xl radial-progress-primary" style="--radial-progress--value:85">85%</div>
    <p class="text-sm mt-2">Tasks Completed</p>
  </div>
</div>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Progresso Radial e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP