Carregando…Carregando…Carregando…Carregando…Progress indicator with 5 intents, 4 sizes, animated fill, label and bar/ring/gauge/skill-list shapes.
$ npx kikitocn add progress@/lib/utilsimport { Progress } from "@/components/ui/cn/progress/Progress";
export function ProgressExample() {
return (
<Progress />
);
}| 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' | 'single' | 'skill-list' renderiza um array de barras rotuladas (absorve SkillBar) |
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
Progress Ring — circular progress with intent colors
Sizes + intents
Skills with animated entry + values