Carregando…Carregando…Carregando…Carregando…Progress indicator with 5 intents, 4 sizes, animated fill, label, bar/ring/gauge/skill-list shapes and a self-driven loading-fake mode.
$ npx kikitocn add progress@/lib/utilsimport { Progress } from "@/components/ui/cn/progress/Progress";
export function ProgressExample() {
return (
<Progress shape="bar" mode="single" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
shape | 'bar' | 'ring' | 'gauge' | 'bar' | Forma: barra linear (padrão), 'ring' (circular) ou 'gauge' (arco) |
mode | 'single' | 'skill-list' | 'fake' | 'single' | 'skill-list' renderiza um array de barras rotuladas (absorve SkillBar); 'fake' roda auto-incremento com jitter |
messages | string[] | undefined | mode='fake': mensagens de status rotativas, uma por faixa de progresso |
duration | number | 4000 | mode='fake': tempo aproximado (ms) até estabilizar perto de `ceiling` |
ceiling | number | 92 | mode='fake': teto máximo (0-100) que o auto-incremento atinge sozinho |
skills | SkillItem[] | undefined | mode='skill-list': lista { label, value, max?, intent?, sublabel? } |
stroke | number | 6 | shape='ring': espessura do traço |
value | number | undefined | Valor atual (0 a max). Undefined = indeterminado |
max | number | 100 | Valor máximo |
intent | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | Cor da barra de progresso |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Espessura da barra |
label | string | undefined | Label acima da barra |
showValue | boolean | false | Exibe percentual ao lado do label |
animated | boolean | false | Aplica animação de stripes na barra |
All intents
xs · sm · md · lg
Indeterminate · animated
mode="fake" — auto-incrementa com jitter, nunca fecha sozinho
Progress Ring — circular progress with intent colors
Sizes + intents
Skills with animated entry + values