RapidRails UI

Progress

A lightweight, accessible progress bar for displaying completion, usage, or status.

Key Features

  • Value clamping — 0–100 automatically, nil renders 0
  • Label and value display — optional header row above the bar
  • Five track heights — :xs through :lg
  • Two variants — :solid (full opacity) and :soft (60% opacity)
  • Animated transitions — CSS width transition for Turbo Stream updates
  • Composes into Stat — rui_stat renders a progress bar via progress:
  • No JavaScript — pure CSS and ERB
  • Starter tier — available on all RRUI licenses

Basic Usage

value is positional and clamped to 0-100 automatically.

Basic Usage 
<%= rui_progress(75) %>

Label & Value

label: shows text above the bar. show_value: shows the percentage. Both can be combined in a header row.

Storage used
60%
Open tickets 60%
Label & Value 
<%= rui_progress(60, label: "Storage used") %>

<%= rui_progress(60, show_value: true) %>

<%= rui_progress(60, label: "Open tickets", show_value: true) %>

Colors

Any semantic or Tailwind color is accepted.

Colors 
<%= rui_progress(75, color: :primary) %>   
<%= rui_progress(75, color: :success) %>
<%= rui_progress(75, color: :warning) %>
<%= rui_progress(75, color: :danger) %>
<%= rui_progress(75, color: :info) %>

Sizes

size: controls the track height.

Sizes 
<%= rui_progress(75, size: :xs) %>    
<%= rui_progress(75, size: :sm) %>    
<%= rui_progress(75, size: :base) %>  
<%= rui_progress(75, size: :md) %>    
<%= rui_progress(75, size: :lg) %>

Variants

:solid (default)

:soft

Variants 
<%= rui_progress(75, variant: :solid) %>  
<%= rui_progress(75, variant: :soft) %>

Animated

Adds a CSS width transition (500ms ease-out) when the value changes. Useful when value is set via Turbo Stream updates or page load.

Animated 
<%= rui_progress(75, animated: true) %>

Value Clamping

Values outside 0-100 are automatically clamped.

Value Clamping 
<%= rui_progress(150) %>   
<%= rui_progress(-10) %>   
<%= rui_progress(nil) %>

Inside a Stat Card

Progress integrates directly with the Stat component via progress:.

Retention
95%
Inside a Stat Card 
<%= rui_stat("Retention", "95%", progress: 95, color: :emerald) %>

Accessibility

  • Uses semantic role="progressbar" on the outer wrapper
  • aria-valuenow, aria-valuemin="0", aria-valuemax="100" set automatically
  • aria-label auto-generated: with label — "Storage used: 60%"; without — "60% complete"
  • Zero JavaScript — pure CSS and ERB

API Reference

rui_progress

Lightweight, accessible progress bar for displaying completion, usage, or status

Parameter Type Default Description
value* Integer 0 Progress value — positional, clamped to 0-100 automatically (nil renders 0)

Appearance

Visual styling options

Parameter Type Default Description
color Symbol :primary Bar color — semantic or Tailwind
size Symbol :base Track height
:xs :sm :base :md :lg
variant Symbol :solid Visual style
:solid :soft

Content

Label and value display

Parameter Type Default Description
label String — Label text shown above the bar
show_value Boolean false Show the "75%" percentage text
animated Boolean false CSS width transition (500ms ease-out) on value change — useful with Turbo Stream updates