Data display

Progress

A determinate or indeterminate bar. Indeterminate is `value={null}` rather than a separate flag, which matches the ARIA model.

data-scope="progress"

Usage

ReactVueSvelteAngular

<Progress value={62} label="Uploading" showValue />

<Progress :value="62" label="Uploading" show-value />

<Progress value={62} label="Uploading" showValue />

<ck-progress [value]="62" label="Uploading" showValue />

Prop	Type	Default	Notes
`value`	number \| null	—	null means indeterminate.
`max`	number	`100`	Upper bound.
`variant`	"primary" \| "success" \| "error" \| "warning" \| "info"	`"primary"`	Bar colour.
`size`	"sm" \| "md" \| "lg"	`"md"`	Bar thickness.
`label`	ReactNode	—	Label above the bar.
`showValue`	boolean	`false`	Print the percentage.
`striped`	boolean	`false`	Striped fill.
`animated`	boolean	`false`	Animate the stripes.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.

v0	v1	Notes
`indeterminate`	`value={null}`