Progress

Progress bars to show completion status.

Basic Progress

A simple progress bar with value.

<%= render Rvk::ProgressComponent.new(value: 25) %>
<%= render Rvk::ProgressComponent.new(value: 50) %>
<%= render Rvk::ProgressComponent.new(value: 75) %>
<%= render Rvk::ProgressComponent.new(value: 100) %>

Sizes

Progress bars come in 3 sizes.

Small

Medium (default)

Large

<%= render Rvk::ProgressComponent.new(value: 60, size: :sm) %>
<%= render Rvk::ProgressComponent.new(value: 60, size: :md) %>
<%= render Rvk::ProgressComponent.new(value: 60, size: :lg) %>

With Percentage Label

Show completion percentage alongside the bar.

35%

65%

Done

<div class="flex items-center gap-3">
  <div class="flex-1">
    <%= render Rvk::ProgressComponent.new(value: 35) %>
  </div>
  <span class="text-sm text-surface-500">35%</span>
</div>

In Context

Progress bars in a task list.

Upload files

100%

Process data

75%

Generate report

30%

Send notifications

<div class="flex items-center gap-3">
  <span class="text-sm text-surface-700">Upload files</span>
  <div class="flex-1">
    <%= render Rvk::ProgressComponent.new(value: 100, size: :sm) %>
  </div>
  <span class="text-xs text-surface-500">100%</span>
</div>

Props

Prop	Type	Default	Description
value	Integer	0	Progress percentage (0-100)
size	Symbol	:md	Bar height: :sm, :md, :lg