Progress

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

Bootstrap 4 documentation
Progress bar example

Our progress bars have a main wrapper .progress-wrapper which contains a label, a percentage label and the standard Bootstrap 4 progress component.

Change the value of the progress bar by updating the content inside aria-valuenow="x".

Luck
10%
Skill
15%
Power of will
10%
Reason to remember the name
100% 
                                                        
<div class="row">
    <div class="col-12">
        <div class="progress-wrapper">
            <div class="progress-info">
                <div class="progress-label">
                    <span class="text-primary">Luck</span>
                </div>
                <div class="progress-percentage">
                    <span>10%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="10"
                    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">Skill</span>
                </div>
                <div class="progress-percentage">
                    <span>15%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="15"
                    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">Power of will</span>
                </div>
                <div class="progress-percentage">
                    <span>10%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="10"
                    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">Reason to remember the name</span>
                </div>
                <div class="progress-percentage">
                    <span>100%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="100"
                    aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</div>
Changing colors

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%
Light Color
60%
Gray Color
60%
Success Bar
60%
Info Bar
60%
Danger Bar
60%
Warning Bar
60% 
                                                        
<div class="row">
    <div class="col-lg-12">
        <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-light">Light Color</span>
                </div>
                <div class="progress-percentage">
                    <span>60%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-light" 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>
        <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" 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" 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" 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-warning">Warning Bar</span>
                </div>
                <div class="progress-percentage">
                    <span>60%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60"
                    aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>  
    </div>
</div>
Using tooltips

Pixel offers tooltips as text labels for the progress bars. To change the color use a modifier class .bg-* (eg. .bg-primary) on the .progress-tooltip element.

Bootstrap

40%

Angular

40%

Javascript

40% 
                                                        
<div class="row">
    <div class="col-12">
        <div class="progress-wrapper">
            <div class="progress-info">
                <h4 class="progress-tooltip bg-success">Bootstrap</h4>
                <div class="progress-percentage">
                    <span>40%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="25"
                    aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="progress-wrapper">
            <div class="progress-info">
                <h4 class="progress-tooltip bg-info">Angular</h4>
                <div class="progress-percentage">
                    <span>40%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25"
                    aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="progress-wrapper">
            <div class="progress-info">
                <h4 class="progress-tooltip bg-danger">Javascript</h4>
                <div class="progress-percentage">
                    <span>40%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="25"
                    aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</div>
Stripes

To used striped styles just add a modifier class .progress-bar-striped to the .progress-bar element.

Striped

40% 
                                                        
<div class="row">
    <div class="col-12">
        <div class="progress-wrapper">
            <div class="progress-info">
                <h4 class="progress-tooltip bg-primary">Striped</h4>
                <div class="progress-percentage">
                    <span>40%</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" aria-valuenow="25"
                    aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</div>
Percentage label positioning

Pixel also offers progress bars with the percentage label on top of the bar. Here's an example:

Task completed
80%
                                                        
<div class="row">
    <div class="col-12">
        <div class="progress-wrapper">
            <div class="progress-info info-xl">
                <div class="progress-label">
                    <span class="text-primary">Task completed</span>
                </div>
            </div>
            <div class="progress progress-xl">
                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="80"
                    aria-valuemin="0" aria-valuemax="100"><span>80%</span></div>
            </div>
        </div>
    </div>
</div>
Choose your size

To change the size of the text label use the modifier class .info-* (eg. .info-xl).

To change the size of the progress bar use the modifier class .progress-* (eg. .progress-xl).

XL Progress Bar
40%
LG Progress Bar
60%
MD Progress Bar
60%
SM Progress Bar
60% 
                                                        
<div class="row">
    <div class="col-12">
        <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" 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" 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">MD Progress Bar</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">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" aria-valuenow="60"
                    aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</div>