Progress

An indicator of how far along a process currently is.

Basic Usage

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

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

Indeterminate

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

<progress class="cd-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="cd-field">
  <label for="progress-example">
    Transferring your files
  </label>
  <progress
    id="progress-example"
    class="cd-progress"
    value="0.75"
  ></progress>
</div>