Concorde UI component — 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 remaini Doc ID: core/components/ui/progress/progress. Keywords: Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress, UI component, sonic-progress, web component, value, max, , remaining, invert, sonic-card, to **, ** (default . URL: https://concorde.supersoniks.org/core/components/ui/progress.

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-progress value="50">Boarding 50%</sonic-progress>

Indeterminate

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

<sonic-progress></sonic-progress>

Type

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

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

Size

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

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

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-progress type="danger" value="80">
      80% fuel used <span slot="remaining">20% left</span>
    </sonic-progress>

Invert

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

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

API reference