Progress

Progress bars for loading states

Basic Usage

50%
HTML 
<div class="bl-progress">
  <div class="bl-progress-bar" style="width: 50%;">50%</div>
</div>

Variants

HTML 
<div class="bl-progress">
  <div class="bl-progress-bar bl-progress-bar-primary" style="width: 30%;"></div>
</div>

<div class="bl-progress">
  <div class="bl-progress-bar bl-progress-bar-success" style="width: 50%;"></div>
</div>

Sizes

HTML 
<div class="bl-progress bl-progress-sm">
  <div class="bl-progress-bar" style="width: 50%;"></div>
</div>

<div class="bl-progress bl-progress-lg">
  <div class="bl-progress-bar" style="width: 50%;"></div>
</div>