Progress

Use these progress bars to indicate percentage based components

Example

The following component is a simple example of a progress bar. You need to add an inline style attribute with the percentage and add the values you want for the min and max ranges with the aria-valuenow, aria-valuemin and aria-valuamax respectively.

Primary Color
50% 
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-primary">Primary Color</span>
        </div>
        <div class="progress-percentage">
            <span>50%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

Color variations

Use the following modifier classes to update the color of the progress bar:

Secondary Color
60%
Tertiary Color
60%
Dark Color
60%
Success Bar
60%
Info Bar
60%
Danger Bar
60% 
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-secondary">Secondary Color</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-secondary" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-tertiary">Tertiary Color</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-tertiary" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-dark">Dark Color</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-dark" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-success">Success Bar</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-info">Info Bar</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-danger">Danger Bar</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

Progress bar with labels Pro

Angular
40%
Wordpress
40%
Laravel
40%
Php
40%
Bootstrap
40%
Angular
40%
Javascript
40% 
<div class="progress-wrapper">
    <div class="progress-info">
        <span class="h4 progress-tooltip bg-primary">Angular</span>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    </div>
    <div class="progress-wrapper">
    <div class="progress-info">
        <span class="h4 progress-tooltip bg-secondary">Wordpress</span>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-secondary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    </div>
    <div class="progress-wrapper">
    <div class="progress-info">
        <span class="h4 progress-tooltip bg-tertiary">Laravel</span>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-tertiary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    </div>
    <div class="progress-wrapper">
    <div class="progress-info">
        <span class="h4 progress-tooltip bg-dark">Php</span>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-dark" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    </div>
    <div class="progress-wrapper">
    <div class="progress-info">
        <span class="h4 progress-tooltip bg-success">Bootstrap</span>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    </div>
    <div class="progress-wrapper">
    <div class="progress-info">
        <span class="h4 progress-tooltip bg-info">Angular</span>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    </div>
    <div class="progress-wrapper">
    <div class="progress-info">
        <span class="h4 progress-tooltip bg-danger">Javascript</span>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    </div>

Sizing

XL Progress Bar
40%
LG Progress Bar
60%
MD Progress Bar
60%
SM Progress Bar
60% 
<div class="progress-wrapper">
    <div class="progress-info info-xl">
        <div class="progress-label">
            <span class="text-primary">XL Progress Bar</span>
        </div>
        <div class="progress-percentage">
            <span>40%</span>
        </div>
    </div>
    <div class="progress progress-xl">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="progress-wrapper">
    <div class="progress-info info-xl">
        <div class="progress-label">
            <span class="text-secondary">LG Progress Bar</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress progress-lg">
        <div class="progress-bar bg-secondary" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="progress-wrapper">
    <div class="progress-info">
        <div class="progress-label">
            <span class="text-primary">MD Progress Bar</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress">
        <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-info">
        <div class="progress-label">
            <span class="text-dark">SM Progress Bar</span>
        </div>
        <div class="progress-percentage">
            <span>60%</span>
        </div>
    </div>
    <div class="progress progress-sm">
        <div class="progress-bar bg-dark" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>