Blocks

Progress

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

Installation

bin/rails g shadcnrb:component progress

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.

<!-- value: 25 -->
<%= sui.progress value: 25 %>
<!-- value: 50 -->
<%= sui.progress value: 50 %>
<!-- value: 75 -->
<%= sui.progress value: 75 %>

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

<%= sui.progress value: 3, max: 10 %>

Method	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.