Progress

Backgrounds

Use background utility classes to change the appearance of individual progress bars.

Default
25%
Primary
60%
Danger
60%
Warning
60%
Success
60%
Info
60% 
<div class="progress-container">
    <span class="progress-badge">Default</span>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
            <span class="progress-value">25%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-primary">
    <span class="progress-badge">Primary</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-danger">
    <span class="progress-badge">Danger</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-warning">
    <span class="progress-badge">Warning</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-success">
    <span class="progress-badge">Success</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-info">
    <span class="progress-badge">Info</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>