Skip to content

role progressbar

Progress bar draft v0.1.0

Shows how far a task has progressed, or that it is in progress when its length is unknown.

A progress bar fills a track from start to end as a task advances: an upload, an export, the steps of a setup. It has a visible label naming the task and, when the progress can be measured, an optional value in percent. When the length is unknown, the bar is indeterminate: a segment moves along the track to say that something is happening. It only reports: a progress bar is never a control.

Playground

40%
HTML 
<div class="ds-progress-bar" data-size="medium">
  <div class="ds-progress-bar__header">
    <label
      class="ds-progress-bar__label"
      data-part="label"
      for="ds-progress-bar-11"
    >Uploading 12 photos</label>
  </div>
  <progress
    class="ds-progress-bar__track"
    data-part="track"
    id="ds-progress-bar-11"
    max="100"
    value="40"
  >40%</progress>
</div>