Progress Bar Size
Progress bar description here
<!-- Default -->
<div class="progress">
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
</div>
<!-- Small -->
<div class="progress progress-small">
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
</div>
Progress Bar State
Progress bar description here
<!-- Default -->
<div class="progress">
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
</div>
<!-- Error -->
<div class="progress">
<div class="progress__bar error" data-percent-start="0" data-percent-end="60"></div>
</div>
<!-- Warning -->
<div class="progress">
<div class="progress__bar warning" data-percent-start="0" data-percent-end="60"></div>
</div>
<!-- Success -->
<div class="progress">
<div class="progress__bar success" data-percent-start="0" data-percent-end="60"></div>
</div>
Progress Bar Variant
Progress bar description here
<!-- Progress Bar Default -->
<div class="progress">
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
</div>
<!-- Progress Bar With Label Right -->
<div class="progress">
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
<span class="progress__label"> </span>
</div>
<!-- Progress Bar With Label Left -->
<div class="progress">
<span class="progress__label"> </span>
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
</div>
<!-- Progress Bar With Label Bottom -->
<div class="progress d-block">
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
<span class="progress__label"> </span>
</div>
<!-- Progress Bar With Label Top -->
<div class="progress d-block">
<span class="progress__label"> </span>
<div class="progress__bar" data-percent-start="0" data-percent-end="60"></div>
</div>
Circle Progress Bar
Progress bar description here