Progress Ring

Feedback

Circular progress ring with 6 intents, label slot, value display and configurable stroke.

Instalação via CLI

$ npx kikitocn add progress-ring

Interno:

@/lib/utils

Exemplo de uso

Progress RingExample.tsx

import { ProgressRing } from "@/components/ui/cn/progress-ring/ProgressRing";

export function ProgressRingExample() {
  return (
    <ProgressRing />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value*`	`number`	—	Valor atual (0 a max)
`max`	`number`	`100`	Valor máximo
`size`	`number`	`80`	Diâmetro do anel em px
`stroke`	`number`	`8`	Espessura do anel em px
`intent`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'primary'`	Cor do arco via token de intent
`label`	`ReactNode`	`undefined`	Conteúdo exibido no centro do anel
`showValue`	`boolean`	`true`	Exibe percentual no centro quando label não é fornecido

Voltar para Feedback

Carregando…