# Progress

Shows **task completion** on a **`value`** / **`max`** scale via a native `<progress>` bar. Omit **`value`** for an **indeterminate** loading animation. Put primary copy in the default slot and optional secondary text in **`remaining`**; set **`invert`** when the bar sits on a colored surface such as **`sonic-card`**.

## Basic example

Set **`value`** from `0` to **`max`** (default `100`). Label text uses the type color.

<sonic-code>
  <template>
    <sonic-progress value="50">Boarding 50%</sonic-progress>
  </template>
</sonic-code>

## Indeterminate

With no **`value`**, the bar animates until progress is known.

<sonic-code>
  <template>
    <sonic-progress></sonic-progress>
  </template>
</sonic-code>

## Type

Semantic color follows **`type`**. With no **`type`**, behavior is `default`.

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-progress value="50">50%</sonic-progress>
      <sonic-progress type="primary" value="50">50%</sonic-progress>
      <sonic-progress type="neutral" value="50">50%</sonic-progress>
      <sonic-progress type="info" value="50">50%</sonic-progress>
      <sonic-progress type="warning" value="50">50%</sonic-progress>
      <sonic-progress type="success" value="50">50%</sonic-progress>
      <sonic-progress type="danger" value="50">50%</sonic-progress>
    </div>
  </template>
</sonic-code>

## Size

Bar height scales with typography via **`size`**. With no **`size`**, font size matches **`md`** (`1rem`).

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-progress size="2xs" value="25">25%</sonic-progress>
      <sonic-progress size="xs" value="25">25%</sonic-progress>
      <sonic-progress size="sm" value="25">25%</sonic-progress>
      <sonic-progress size="md" value="25">25%</sonic-progress>
      <sonic-progress size="lg" value="25">25%</sonic-progress>
      <sonic-progress size="xl" value="25">25%</sonic-progress>
      <sonic-progress size="2xl" value="25">25%</sonic-progress>
    </div>
  </template>
</sonic-code>

## Default and remaining slots

The default slot is the main label (left). **`remaining`** is right-aligned with lighter weight—use it for “left to complete” copy.

<sonic-code>
  <template>
    <sonic-progress type="danger" value="80">
      80% fuel used <span slot="remaining">20% left</span>
    </sonic-progress>
  </template>
</sonic-code>

## Invert

On tinted backgrounds, **`invert`** adjusts track and fill tokens so the bar stays readable (pair with matching **`type`** on **`sonic-card`** or similar).

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-card type="info">
        <sonic-progress invert type="info" value="50">50%</sonic-progress>
      </sonic-card>
      <sonic-card type="warning">
        <sonic-progress invert type="warning" value="50">50%</sonic-progress>
      </sonic-card>
      <sonic-card type="success">
        <sonic-progress invert type="success" value="50">50%</sonic-progress>
      </sonic-card>
      <sonic-card type="danger">
        <sonic-progress invert type="danger" value="50">50%</sonic-progress>
      </sonic-card>
    </div>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `value` | number | Completion amount; omit for indeterminate state |
| `max` | number (default `100`) | Upper bound for **`value`** |
| `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` | Semantic bar and label color |
| `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Typography scale (bar height follows `em`) |
| `invert` | boolean | High-contrast tokens on colored backgrounds |

| Slot | Description |
|------|-------------|
| *(default)* | Primary label below the bar (left) |
| `remaining` | Secondary label below the bar (right) |