PhiaUi.Components.Progress (phia_ui v0.1.17)

Linear progress bar for displaying completion of a task or process.

Renders a semantic role="progressbar" element with the appropriate ARIA attributes. The fill width is computed at render time from :value and :max and applied as an inline width style. Purely CSS — no JavaScript required.

Examples

Basic usage (50% of 100)

<.progress value={50} />

Custom maximum (file upload: 3 of 5 files)

<.progress value={3} max={5} />

Taller bar

<.progress value={75} class="h-3" />

Inside a dashboard stat card

<.stat_card title="Storage used" value="4.2 GB / 10 GB">
  <.progress value={42} class="mt-2" />
</.stat_card>

Onboarding checklist completion

<%!-- Shows how many setup tasks the user has completed --%>
<div class="space-y-1">
  <div class="flex justify-between text-sm">
    <span>Setup progress</span>
    <span>{@completed}/{@total} steps</span>
  </div>
  <.progress value={@completed} max={@total} />
</div>

Animated skill bars

<%= for {skill, level} <- @skills do %>
  <div class="space-y-1">
    <div class="flex justify-between text-sm">
      <span>{skill}</span>
      <span>{level}%</span>
    </div>
    <.progress value={level} class="h-2" />
  </div>
<% end %>

Accessibility

The outer <div> carries:

role="progressbar" — announces the element as a progress indicator.
aria-valuenow={value} — the current numeric value.
aria-valuemin="0" — always zero.
aria-valuemax={max} — the configured maximum.

Screen readers announce something like "50%" or "3 of 5". For labelled progress bars, add aria-label or aria-labelledby via :rest:

<.progress value={42} aria-label="Storage used: 42%" />

Summary

Functions

progress(assigns)

Renders a horizontal progress bar.

Functions

progress(assigns)

Renders a horizontal progress bar.

The fill width is computed as floor(value / max * 100)% and applied as an inline style on the inner fill <div>. A transition-all duration-300 animation smoothly widens the bar when the value changes — this works naturally with LiveView's real-time assigns.

Both the track (bg-secondary) and fill (bg-primary) use semantic color tokens so they adapt automatically to light and dark mode.

Example

<.progress value={@upload_progress} aria-label="Upload progress" />

Attributes

value (:integer) - Current progress value. Must be between 0 and :max. Default: 0. Defaults to 0.
max (:integer) - Maximum value for the progress bar. Default: 100. Set to a custom value when your scale differs (e.g. max={5} for a 5-step flow). Defaults to 100.
class (:string) - Additional CSS classes applied to the track element. Use h-N to change bar height (default h-2). Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root element. Useful for aria-label or aria-labelledby.