shadcn-rails

Progress

Displays an indicator showing the completion progress of a task.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component progress

Usage

<%= render Shadcn::ProgressComponent.new(value: 60) %>

Examples

Different Values

0%
25%
50%
75%
100%

Custom Max Value

Use the max prop to set a custom maximum value.

30 of 50 items 60%

With Label

Upload Progress 73%

In a Card

Storage Usage

You're using 7.2 GB of 10 GB

2.8 GB available

API Reference

API Reference

Prop Type Default Description
value Integer/Float nil Current progress value
max Integer/Float 100 Maximum progress value
indeterminate Boolean false Whether to show indeterminate (loading) state
class_name String nil Additional CSS classes to apply

Accessibility

  • Uses role="progressbar" for proper accessibility
  • Has aria-valuemin, aria-valuemax, and aria-valuenow attributes
  • For indeterminate state, aria-valuenow is omitted
  • Consider adding a visible label or aria-label to describe what the progress represents