Progress

Examples

Default

Displays an indicator showing the completion progress of a task.

<%= render "ui/progress", value: 60 %>

<%= render UI::Progress.new(value: 60) %>

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

Different Values

Progress bars at different completion states.

0%

25%

50%

75%

100%

<div class="space-y-4 w-full max-w-md">
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">0%</p>
    <%= render "ui/progress", value: 0 %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">25%</p>
    <%= render "ui/progress", value: 25 %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">50%</p>
    <%= render "ui/progress", value: 50 %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">75%</p>
    <%= render "ui/progress", value: 75 %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">100%</p>
    <%= render "ui/progress", value: 100 %>
  </div>
</div>

0%

25%

50%

75%

100%

<div class="space-y-4 w-full max-w-md">
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">0%</p>
    <%= render UI::Progress.new(value: 0) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">25%</p>
    <%= render UI::Progress.new(value: 25) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">50%</p>
    <%= render UI::Progress.new(value: 50) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">75%</p>
    <%= render UI::Progress.new(value: 75) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">100%</p>
    <%= render UI::Progress.new(value: 100) %>
  </div>
</div>

0%

25%

50%

75%

100%

<div class="space-y-4 w-full max-w-md">
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">0%</p>
    <%= render UI::ProgressComponent.new(value: 0) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">25%</p>
    <%= render UI::ProgressComponent.new(value: 25) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">50%</p>
    <%= render UI::ProgressComponent.new(value: 50) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">75%</p>
    <%= render UI::ProgressComponent.new(value: 75) %>
  </div>
  <div class="space-y-1">
    <p class="text-sm text-muted-foreground">100%</p>
    <%= render UI::ProgressComponent.new(value: 100) %>
  </div>
</div>

With Label

Progress bar with a descriptive label.

Uploading... 75%

<div class="w-full max-w-md space-y-2">
  <div class="flex justify-between text-sm">
    <span>Uploading...</span>
    <span class="text-muted-foreground">75%</span>
  </div>
  <%= render "ui/progress", value: 75 %>
</div>

Uploading... 75%

<div class="w-full max-w-md space-y-2">
  <div class="flex justify-between text-sm">
    <span>Uploading...</span>
    <span class="text-muted-foreground">75%</span>
  </div>
  <%= render UI::Progress.new(value: 75) %>
</div>

Uploading... 75%

<div class="w-full max-w-md space-y-2">
  <div class="flex justify-between text-sm">
    <span>Uploading...</span>
    <span class="text-muted-foreground">75%</span>
  </div>
  <%= render UI::ProgressComponent.new(value: 75) %>
</div>

Features

Custom styling with Tailwind classes
Form integration
ARIA attributes for accessibility

API Reference

A progress indicator component for displaying task completion or loading status.

Parameters

Name	Type	Default	Description
value	Integer	0	The current value

Accessibility

Adheres to theMeter WAI-ARIA design pattern

Implements the WAI-ARIA Meter pattern with proper roles, states, and keyboard navigation.

ARIA Attributes

aria-valuemin
aria-valuemax
aria-valuenow
role="progressbar"