Progress

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

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

<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> 

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

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

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

<blaze-progress size="xsmall" percentage="10" rounded>10%</blaze-progress><br />
<blaze-progress size="small" type="brand" percentage="15">15%</blaze-progress><br />
<blaze-progress size="medium" type="info" percentage="20" rounded>20%</blaze-progress><br />
<blaze-progress size="large" type="success" percentage="25">25%</blaze-progress><br />
<blaze-progress size="xlarge" type="warning" percentage="30" rounded>30%</blaze-progress><br />
<blaze-progress size="super" type="error" percentage="35">35%</blaze-progress>