# `PhiaUi.Components.Progress`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/feedback/progress.ex#L1)

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%" />

# `progress`

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`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*