Concorde UI component — Progress bar. Displays an indicator showing the completion progress of a task. Doc ID: core/components/ui/progress/progress. Keywords: Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress bar, UI component, sonic-progress, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/progress/progress.html.

Progress bar

Displays an indicator showing the completion progress of a task.

Indeterminate

<sonic-progress></sonic-progress>

Remaining

<sonic-progress  type="danger" value="80">
    80% Used <span slot="remaining">20% left</span>
  </sonic-progress>

Sizes

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

Type

<div class="grid gap-3">
  <sonic-progress  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>

Invert

<div class="bg-neutral-900 p-4 rounded-md">
  <sonic-progress  type="invert" value="50">50%</sonic-progress>
</div>