Progress

<div class="progress-container progress-primary">
    <span class="progress-badge">Primary</span>
    <div class="progress">
        <div class="progress-bar progress-bar-primary" 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-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
            <span class="progress-value">50%</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="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;">
            <span class="progress-value">77%</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-success" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" style="width: 46%;">
            <span class="progress-value">46%</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-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
            <span class="progress-value">90%</span>
        </div>
    </div>
</div>