Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create progress bar in different colors in Bootstrap
Overview
Bootstrap provides beautiful ways to build the components to our website. The bootstrap comes up with certain classes by using these classes in our tags. A whole component can be built very nicely without adding an external style sheet, but if we want to make some changes to the component then we can add a stylesheet to it.
To create a simple progress bar with the help of bootstrap, we will use certain bootstrap classes these are −
progress
progress-bar
If we want to create a progress bar with the animated striped, bootstrap has its own class which provides the animation effect these are −
progress-bar-striped
progress-bar-animated
Bootstrap CDN Link
Before starting to build your progress bar, firstly add the bootstrap CDN link to the head tag of your page.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp"crosso rigin="anonymous">
Algorithm
Step 1 − Create a HTML boilerplate code in your text editor.
Step 2 − Add the bootstrap CDN link given above to your code in the head tag.
Step 3 − Create a parent div container which contains the progress bars of the page.
Step 4 − Now create a div container to build the progress bar and add the “.progress” class to it. Also add some attributes like: role , aria-valuemin, aria-valuemax with the value of progressbar, 0 and 100 respectively.
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;"> </div>
Step 5 − Create another div inside the progress class div and add the class “.progress-bar'' to that div. Set the color of progress as per our choice using bg-dark, bg-warning, bg-success, bg-danger.
<div class="progress-bar bg-success" style="width: 25%">25%</div>
Step 6 − Progress bar is created successfully.
Example
In the given example, we will be building a simple basic progress bar using the bootstrap predefined classes. The progress bar will indicate the progress with the number of percentages on the bar.
<html>
<head>
<title>Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column mx-auto justify-content-center" style="width: 80vw;height: 100vh;">
<h3 class="text-success fw-bold text-center bg-light rounded py-4 px-1">
Percentage progress bar
</h3>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Danger example"aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>
</div>
</body>
</html>
Algorithm
Step 1 − Create a HTML boilerplate code in your text editor.
Step 2 − Add the bootstrap CDN link given above to your code in the head tag.
Step 3 − Create a parent div container which contains the progress bars of the page.
Step 4 − Create a div container with class name “.progress” and add attributes to the div tag such as: role , aria-valuemin, aria-valuemax with the value of progressbar, 0 and 100 respectively.
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
Step 5 − Now inside the current progress class div, create a div which will contains the striped progress with the animations, to build this add the “progress-bar”, “progress-bar-striped”, “progress-bar-animated” classes to the child div of the parent progress div.
<div class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width: 50%"></div>
Step 6 − Animated progress bar is created successfully.
Example
In this example we will build an upgraded version of the progress bar with animation. The animation in the progress bar can be achieved by the bootstrap predefined classes mentioned in the top of the page.
<html>
<head>
<title>Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="pcontainer d-flex flex-column mx-auto justify-content-center" style="width: 80vw;height: 100vh;">
<h3 class="text-success fw-bold text-center bg-light rounded py-4 px-1">Striped animated progress bar</h3>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" style="width: 25%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width: 50%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" style="width: 75%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" style="width: 100%"></div>
</div>
</div>
</body>
</html>
Conclusion
As we had seen two examples above which contain a basic progress bar and another progress bar which is animated. So an animated progress bar makes the graphic user interface more attractive. By using the animated progress bar we can show the different percentage of progress covered with different colors. Overall the progress is a good practice to use in our website when necessary.
661 Views
