Progress

Use Pixel's progress bars featuring custom styles for bars and labels.

Bootstrap 4 documentation
Examples

In order to change the color of the text use modifier class .text-* (eg. .text-primary) inside the .progress-label element.

To change the background color of the progress bar use the modified class .bg-* (eg. .bg-primary) on the .progress-bar element.

Below are examples of a variety of colors:

Primary Color
50%
Secondary Color
60%
Tertiary Color
60%
Dark Color
60%
Gray Color
60% 
                                                        
<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"
        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<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"
        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"
        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"
        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-gray">Gray Color</span>
    </div>
    <div class="progress-percentage">
        <span>60%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar bg-gray" role="progressbar"
        aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>