Progress bars are used for showcasing skills, percentage of projects completion and for similar purposes. Bootstrap 5 has different styles of progress bars similar to previous versions. In this tutorial let us explore more on each type of progress bars offered in Bootstrap 5.
Bootstrap 5 Progress Bars Tutorial
- HTML5 progress bars
- Bootstrap progress bars CSS classes
- Creating default progress bars
- Progress bars with different background colors
- Adding labels in progress bars
- Multiple progress bars
- Striped style
- Animated striped style
- Adjusting height
Let us discuss each topic in detail.
1. HTML5 Progress Bars
Remember HTML5 has a default <progress> tag to create horizontal progress bars which is sufficient in most cases. Below is the code block of HTML5 progress bars.
<progress value="50" max="100">50 %</progress><br />
<progress value="60" max="100">60 %</progress><br />
<progress value="70" max="100">70 %</progress><br />
<progress value="80" max="100">80 %</progress><br />It will look like below on the browser:
Bootstrap does not use HTML5 progress bar and has it’s own style for progress bar component.
2. CSS Classes Used in Bootstrap Progress Bars
Bootstrap 4 uses the following CSS classes to create progress bars:
- “.progress” class is used for outer wrapper for the progress bar. It is used to contain multiple progress bars within the wrapper.
- “.progress-bar” class is used to create actual progress bar to show the percentage of progress.
- Width of the each progress bar should be explicitly defined with additional CSS classes.
- Additionally you can add “role” and “aria” attributes to the progress bar for readability purpose.
- “aria-valuenow” is used to indicate the current progress value, “aria-valuemin” is the minimum value which is 0 and “aria-valuemax” is the maximum value which is 100.
Let us create some examples using these classes.
3. Default Progress Bars
The default progress bar uses the primary color for showing the progress and lightgray for the background. Below is the code for creating five progress bars with 0, 25, 50, 75 and 100% progress.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>It will look like below on the browser:
As mentioned above, each progress bar should have a width explicitly defined to show the completion. You can either use inline style or utility classes for this purpose. We have used the utility sizing classes for 25%, 50% and 75% with w-25, w-50 and w-75 respectively. For 100% width, we have used inline style with “width:100%”.
Also remember to add manual line break between progress bars to avoid all bars are showing on the same line.
4. Progress Bars with Backgrounds
Similar to many other components, you can just use the background utility classes to change the background to success, warning, info, danger, dark or secondary colors.
<div class="progress">
<div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div>
</div>The progress bars will look like below:
Note the primary color is the default value so you don’t need to mention if you want the progress to be in primary color. Also you can’t use light background color as the background of the progress bar is also in light color.
You can use background utility classes on the outer progress wrapper to change the background of the progress bar. For example, below code will produce the progress bar with red (danger) color background instead of lightgray.
<div class="progress bg-danger">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>The result will look like below on the browser:
5. Progress Bars with Labels
If you want to add the labels to the progress bar, just add the text before the closing </div> tag of each progress bar. Below is an example to show 75% completion:
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div>
</div>The label will be shown on top of the bar with center alignment like below:
6. Multiple Progress Bars
Adding multiple progress bars within a single outer wrapper will create all bars in a single line.
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>The multiple progress bars will look like below:
7. Striped Progress Bars
The “.progress-bar-striped” class is used to create striped progress bars (background utility class is used to show different colors).
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>Striped progress bars should look like below:
8. Animated Striped Progress Bars
The last option is to animate the stripe using “.progress-bar-animated” class.
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div>
</div>This will create a animated progress bar with green stripes. Remember you can only animate the striped bars and not the default ones.
9. Changing Height or Thickness of Progress Bars
By default the progress bars will have 1rem height. You can change the height using inline style within “.progress-bar” class and the outer wrapper will automatically aligned accordingly. Let us create two bars with 0.rem and 30px in height:
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>The result should be like below on the browser:
The problem in changing the height is the labels when used will not align properly. Again you should use additional styles manually to align the labels in vertical center.
Leave a Reply
Your email is safe with us.