Progress Component

Classes: .progress, .progress-thin, .progress-bar, .progress-bar-success, .progress-bar-danger, .progress-bar-warning, .progress-bar-primary, .progress-label, .progress-bar-striped

Features:

Progress bars with color/status variants
Thin style, labels, and striped effect

Example

Success 80%

Danger 60%

Warning 50%

Primary 70%

Usage:

<div class="progress progress-thin">
  <div class="progress-bar progress-bar-success" style="width: 80%"></div>
</div>

<div class="progress progress-thin">
  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>

<div class="progress progress-thin">
  <div class="progress-bar progress-bar-warning" style="width: 80%"></div>
</div>

<div class="progress progress-thin">
  <div class="progress-bar progress-bar-primary" style="width: 80%"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 80%">
    <span class="progress-label">Success 80%</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 80%">
    <span class="progress-label">Success 80%</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-danger" style="width: 60%">
    <span class="progress-label">Danger 60%</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 60%">
    <span class="progress-label">Danger 60%</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 50%">
    <span class="progress-label">Warning 50%</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 50%">
    <span class="progress-label">Warning 50%</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-primary" style="width: 70%">
    <span class="progress-label">Primary 70%</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-primary progress-bar-striped" style="width: 70%">
    <span class="progress-label">Primary 70%</span>
  </div>
</div>

Customization:

Add utility classes for custom width, color, or animation