Purpose Website 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