Progress

Shows how far along a task is.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add progress --yes

The progress registry item installs these files:

app/components/ui_component.rb
app/components/ui/progress_component.rb
app/helpers/ui/progress_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

The server keeps the value within 0..max. The component has no state in the browser, so to update it live, re-render it with Turbo Streams or Frames.

<%= ui_progress(value: 60, aria: { label: "Upload progress" }) %>

Or render the component Ui::ProgressComponent directly:

<%= render Ui::ProgressComponent.new(value: 8, max: 12) %>

Examples

Default

The value is rendered on the server and exposed through aria-valuenow.

<%= ui_progress(value: 60, aria: { label: "Upload progress" }, class: "w-64") %>

Values

Bars at different stages of completion.

<div class="grid w-64 gap-4">
  <%= ui_progress(value: 25, aria: { label: "25% complete" }) %>
  <%= ui_progress(value: 50, aria: { label: "50% complete" }) %>
  <%= ui_progress(value: 100, aria: { label: "100% complete" }) %>
</div>

Custom max and height

Use max: for your own scale and classes to adjust the height.

<%= ui_progress(value: 8, max: 12, class: "h-1 w-64", aria: { label: "8 of 12 tasks" }) %>

API reference

ui_progress(**options) wraps Ui::ProgressComponent.new(**options).

Argument	Type	Default	Description
`value`	Numeric	`0`	The current progress; clamped to `0..max` and exposed as `aria-valuenow`.
`max`	Numeric	`100`	The top of the scale (`aria-valuemax`).
`class` / `class_name`	String	`nil`	Extra classes (width, height, …).
`**attrs`	Hash	`{}`	Free-form HTML attributes; label it with `aria: { label: }`.