Getting Started
How To
Components
Progress
Use Leaf's progress bars featuring custom styles for bars and labels.
Bootstrap 4 documentationProgress 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
<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>