How to create a stacked progress bar using Bootstrap 5 ?
In this article, we will know how to create the stacked progress bar with the label on it using Bootstrap. Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A Progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. We can add a progress bar on a web page using predefined bootstrap classes. Bootstrap provides many types of progress bars & also supports several custom progress bar which includes Stacked Progress Bar and Animated Progress Bar.
By using the Bootstrap Progress Bar, users can quickly identify the status of tasks executed for a particular process. For instance, if a user is downloading something, the progress bar will display the status of completion or the progress of that ongoing download. A similar case can think for uploading & etc.
<div class="progress"> Contents <div>
Approach: To create a progress bar:
- Use class progress inside a div class.
- Inside the already made div class, add another div tag with a class .progress-bar. Here, bg-success is used for showing the progress.
- Mention the progress of the bar under a style attribute using the width as a percentage. For eg- style=”width:50%
Example 1: This example illustrates the default progress bar in Bootstrap.
Now, we will follow the below steps to build our Stacked Progress Bar.
Step 1: Download Bootstrap’s latest version or we can directly include the Bootstrap CDN link into the <head> tag.
<!–Bootstrap CSS plugin–>
<link href=”https://firstname.lastname@example.org/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
<script src=”https://email@example.com/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>
Step 2: Declare the class as a container with values as .progress in the outer <div>.
<div class="progress"> <div></div> <div></div> </div>
Step 3: Add .progress-bar class to inner <div> container. To specify the width for the progress bar, we can use the pre-defined bootstrap class for the width that will set the width of the bar. For instance, w-25 p-3 will set the width of 25%, w-50 p-3 will set the width of 50% & so on.
<div class="progress"> <div class="progress-bar bg-success w-25 p-3"> Progress 1 </div> <div class="progress-bar bg-success w-50 p-3"> Progress 2 </div> </div>
Step 4: For Labelled Stacked Progress Bar, the text inside the stack progress bar will display the multiple task completion in percentage.
Example 2: This example illustrates the Labelled Stacked Progress Bar using Bootstrap v5.0.