Progress Bar

A segmented progress bar component for displaying completion status with label positioning options.

npx chilli@latest add progress-bar

Small (4px)

Medium (8px)

20%

60%

100%

40%

80%

40%

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value from 0 to 100.
`segments`	`number`	`5`	Number of segments in the bar.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height of the progress bar.
`labelPosition`	`"none" \| "right" \| "bottom"`	`"none"`	Position of the percentage label.
`formatLabel`	`(value: number) => string`	`—`	Custom label formatter.