Progress

Progress bars and stacked distribution bars for showing completion and breakdown.

Progress bar

Set width on the .fill child to indicate completion.

<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress">
  <div class="fill" style="width: 65%"></div>
</div>

<div class="progress-bar progress-bar--thick" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Download progress">
  <div class="fill" style="width: 45%"></div>
</div>

Default

Thick variant

Near complete

Just started

Stacked bar

Show distribution across categories. Each .segment gets a width.

Code

<div class="stacked-bar">
  <div class="segment segment--primary" style="width: 40%"></div>
  <div class="segment segment--secondary" style="width: 35%"></div>
  <div class="segment segment--muted" style="width: 25%"></div>
</div>

Three-way split

Two-way split