<progress>

The <progress> element visually represents task completion.

Use the value and max attributes to set progress, or omit value for an indeterminate state.

Pair with a <label> to give it an accessible name for screen readers.

Basic Usage

<progress value="50" max="100">
  &nbsp;
</progress>

Indeterminate Progress

<progress>
  &nbsp;
</progress>

Progress with Label

<label>
  Upload progress
  <progress value="50" max="100">
    50%
  </progress>
</label>

Variants

Intent Variants

To convey intent and importance, progress bars can be styled with different variants:

See code

<section>
  <progress value="50" max="100" class="primary">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="secondary">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="contrast">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="success">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="info">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="warning">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="danger">
    &nbsp;
  </progress>
</section>

Modifiers

.subtle creates progress bars with a more muted appearance, often used for less prominent actions.

See code

<section>
  <progress value="50" max="100" class="primary subtle">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="secondary subtle">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="contrast subtle">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="success subtle">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="info subtle">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="warning subtle">
    &nbsp;
  </progress>
  <progress value="50" max="100" class="danger subtle">
    &nbsp;
  </progress>
</section>