Link copied!

Progress Examples

<div class="e-progress">
  <div class="e-progress__bar" data-e-percent="60%" style="width: 60%"></div>
</div>
<div class="e-progress e-progress-inverse">
  <div class="e-progress__bar" data-e-percent="50%" style="width: 50%"></div>
</div>
<div class="e-progress">
  <div class="e-progress__bar" style="width: 60%"></div>
  <div class="e-progress__label">
    <div>0</div>
    <div>100</div>
    <div>200</div>
    <div>300</div>
  </div>
</div>
<div class="e-progress e-progress-indicator">
  <div class="e-progress__bar" style="width: 18%" data-e-percent="18%"></div>
</div>
<div class="e-margin-vertical-s">
    <div class="e-progress">
      <div class="e-progress__bar e-progress__bar-info" data-e-percent="60" style="width: 60%"></div>
    </div>
</div>

<div class="e-margin-vertical-s">
    <div class="e-progress">
      <div class="e-progress__bar e-progress__bar-success" data-e-percent="60" style="width: 60%"></div>
    </div>
</div>

<div class="e-margin-vertical-s">
    <div class="e-progress">
      <div class="e-progress__bar e-progress__bar-warning" data-e-percent="60" style="width: 60%"></div>
    </div>
</div>

<div class="e-margin-vertical-s">
    <div class="e-progress">
      <div class="e-progress__bar e-progress__bar-error" data-e-percent="60" style="width: 60%"></div>
    </div>
</div>