Progress

An indicator of how far along a process currently is.

Basic Usage

You can style progress elements by giving them the progress class.

<progress class="progress" value="50" max="100"></progress>

Indeterminate

To make a Progress bar indeterminate, omit the value attribute.

<progress class="progress"></progress>

Label

As an accessibility best practice, progress bars should have a label. One way to do this is to place them in a Field.

Transferring your files

<div class="field">
  <label for="progress-example"
    >Transferring your files</label
  >
  <progress
    id="progress-example"
    class="progress"
    value="0.75"
  ></progress>
</div>