Blocks

Progress

Displays a horizontal bar indicating the completion percentage of a task or operation.

Usage

Pass value: to set the current progress. The default maximum is 100.

sui.progress value: 50

The indicator width is calculated as value / max * 100%. Values are clamped to 0..100.

sui.progress value: 25

sui.progress value: 50

sui.progress value: 75

Override max: when your domain uses a different scale (e.g. steps, bytes).

sui.progress value: 3, max: 10

Method	Key args	Default	Description
progress	value:, max:	0, 100	Renders the progress bar. Sets `role="progressbar"` and ARIA value attributes automatically.
value:	Numeric	0	Current progress value. Clamped to `0..max` before rendering.
max:	Numeric	100	Upper bound of the progress range. Used to compute the fill percentage.