# Boomerang UI Kit

## Progress

Documentation and examples for using the custom progress bars featuring support for stacked bars, animated backgrounds and text labels.

Open Bootstrap Docs

### Example

80%
90%

    <div class="progress-wrapper mb-3">
        <div class="progress" style="height: 1px;">
            <div class="progress-bar bg-yellow" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="progress-wrapper mb-3">
        <div class="progress" style="height: 5px;">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="progress-wrapper mb-3">
        <div class="progress" style="height: 10px;">
            <div class="progress-bar bg-primary" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="progress-wrapper">
        <div class="progress" style="height: 16px;">
            <div class="progress-bar bg-green" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
        </div>
    </div>
    <div class="progress-wrapper">
        <div class="progress" style="height: 20px;">
            <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
        </div>
    </div>

### Labeled progress

#### Task completed

#### 40%

#### Task completed

#### 40%

#### Task completed

#### 40%

    <div class="progress-wrapper">
        <h4 class="progress-label">Task completed</h4>
        <h4 class="progress-percentage text-uppercase">40%</h4>
        <div class="progress" style="height: 5px;">
            <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
        </div>
    </div>
    <div class="progress-wrapper">
        <h4 class="progress-label">Task completed</h4>
        <h4 class="progress-percentage text-uppercase">40%</h4>
        <div class="progress" style="height: 8px;">
            <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
        </div>
    </div>
    <div class="progress-wrapper">
        <h4 class="progress-label">Task completed</h4>
        <h4 class="progress-percentage text-uppercase">40%</h4>
        <div class="progress" style="height: 10px;">
            <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
        </div>
    </div>

### Label as tooltip

#### 40%

#### 60%

#### 80%

    <div class="progress-wrapper">
        <h4 class="progress-tooltip" style="left: 40%;">40%</h4>
        <div class="progress" style="height: 3px;">
            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
        </div>
    </div>
    <div class="progress-wrapper">
        <h4 class="progress-tooltip" style="left: 60%;">60%</h4>
        <div class="progress" style="height: 3px;">
            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
        </div>
    </div>
    <div class="progress-wrapper">
        <h4 class="progress-tooltip" style="left: 80%;">80%</h4>
        <div class="progress" style="height: 3px;">
            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
        </div>
    </div>

###### Additional Class Reference

You can see all the background options in the dedicated page which can be found here.

`.bg-{color}`
  Apply to `.progress-bar` to change the background color