Progress

<div class="c-progress">
  <div class="c-progress__bar" style="width:15%;"></div>
</div>

Rounded

<div class="c-progress c-progress--rounded">
  <div class="c-progress__bar" style="width:15%;"></div>
</div>

colors






<div class="c-progress">
  <div class="c-progress__bar" style="width:5%;"></div>
</div><br>
<div class="c-progress">
  <div class="c-progress__bar c-progress__bar--brand" style="width:15%;"></div>
</div><br>
<div class="c-progress">
  <div class="c-progress__bar c-progress__bar--info" style="width:20%;"></div>
</div><br>
<div class="c-progress">
  <div class="c-progress__bar c-progress__bar--warning" style="width:25%;"></div>
</div><br>
<div class="c-progress">
  <div class="c-progress__bar c-progress__bar--success" style="width:45%;"></div>
</div><br>
<div class="c-progress">
  <div class="c-progress__bar c-progress__bar--error" style="width:65%;"></div>
</div>

Sizes






<div class="c-progress u-xsmall">
  <div class="c-progress__bar" style="width:5%;"></div>
</div><br>
<div class="c-progress x-small">
  <div class="c-progress__bar c-progress__bar--brand" style="width:15%;"></div>
</div><br>
<div class="c-progress x-medium">
  <div class="c-progress__bar c-progress__bar--info" style="width:20%;"></div>
</div><br>
<div class="c-progress x-large">
  <div class="c-progress__bar c-progress__bar--warning" style="width:25%;"></div>
</div><br>
<div class="c-progress x-xlarge">
  <div class="c-progress__bar c-progress__bar--success" style="width:45%;"></div>
</div><br>
<div class="c-progress x-super">
  <div class="c-progress__bar c-progress__bar--error" style="width:65%;"></div>
</div>

Text

5%

15%

20%

25%

45%

65%
<div class="c-progress u-xsmall">
  <div class="c-progress__bar" style="width:5%;"></div>
</div><br>
<div class="c-progress x-small">
  <div class="c-progress__bar c-progress__bar--brand" style="width:15%;"></div>
</div><br>
<div class="c-progress x-medium">
  <div class="c-progress__bar c-progress__bar--info" style="width:20%;"></div>
</div><br>
<div class="c-progress x-large">
  <div class="c-progress__bar c-progress__bar--warning" style="width:25%;"></div>
</div><br>
<div class="c-progress x-xlarge">
  <div class="c-progress__bar c-progress__bar--success" style="width:45%;"></div>
</div><br>
<div class="c-progress x-super">
  <div class="c-progress__bar c-progress__bar--error" style="width:65%;"></div>
</div>

Stacked

<div class="c-progress">
  <div class="c-progress__bar" style="width: 15%;"></div>
  <div class="c-progress__bar c-progress__bar--brand" style="width: 25%;"></div>
  <div class="c-progress__bar c-progress__bar--info" style="width: 10%;"></div>
  <div class="c-progress__bar c-progress__bar--warning" style="width: 12%;"></div>
  <div class="c-progress__bar c-progress__bar--success" style="width: 18%;"></div>
  <div class="c-progress__bar c-progress__bar--error" style="width: 3%;"></div>
</div>