# Progress bar

Displays an indicator showing the completion progress of a task.

## Indeterminate

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


## Remaining

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

## Sizes

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

## Type

<sonic-code>
  <template>
<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>
   </template>
</sonic-code>


## Invert

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