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 multi step progress bar using Bootstrap?
A progression indicator is a visual portrayal of the advancement of an assignment, ordinarily manifested as a level bar that becomes filled in as the undertaking proceeds. Multi-phased progression indicators are remarkably advantageous when the task being executed comprises a series of minor tasks or phases. Within this written composition, we shall direct you through the progression of producing a multi-tiered progression bar with the aid of Bootstrap, a widely used framework for front-end web development. Following the conclusion of this instructional guide, you will possess a firm comprehension of how to generate an aesthetically pleasing and operable progression bar for implementation in your web applications.
Approach
We shall embark on a rather uncomplicated method to achieve the aforementioned objective. Our journey commences with the HTML code, which will lay the foundation for the progress bar and buttons, utilizing Bootstrap's progress bar and button components. We shall initialize the progress bar to have a width of 0%, as configured using the inline style attribute. We shall augment the website's accessibility by appending the attributes 'role', 'aria-valuenow', 'aria-valuemin', and 'aria-valuemax' to our HTML.
We shall then fabricate the buttons utilizing the 'btn' class from Bootstrap's button component, with each button being attributed a distinct identifier for later identification in the jQuery code. With the aid of jQuery programming, we shall establish happening handlers for each push button, which shall enable the width and magnitude of the progress bar to be altered correspondingly when the button is clicked.
Modification of the width shall be implemented by defining the width CSS characteristic of the .progress-bar class, while the magnitude shall be modified by defining the aria-valuenow property. This methodology provides a facile and versatile means to fabricate a dynamic multi-stage advancement indicator, equipped with the facility to modify the progression status in light of user activities. The incorporation of Bootstrap and jQuery furnishes an effortless approach to generate an aesthetically pleasing and utilitarian advancement indicator with little code.
Example
The following is the complete code which we are going to look at in this example −
<!DOCTYPE html>
<html>
<head>
<title>How to create multi step progress bar using Bootstrap?</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.progress {
height: 20px;
}
</style>
</head>
<body>
<h4>How to create multi step progress bar using Bootstrap?</h4>
<div class="container">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" id="step1">Step 1</button>
<button type="button" class="btn btn-info" id="step2">Step 2</button>
<button type="button" class="btn btn-warning" id="step3">Step 3</button>
<button type="button" class="btn btn-danger" id="step4">Step 4</button>
</div>
</div>
<script>
$(document).ready(function() {
let currentStep = 0;
$("#step1").click(function() {
currentStep = 25;
$(".progress-bar").css("width", currentStep + "%").attr("aria-valuenow", currentStep);
});
$("#step2").click(function() {
currentStep = 50;
$(".progress-bar").css("width", currentStep + "%").attr("aria-valuenow", currentStep);
});
$("#step3").click(function() {
currentStep = 75;
$(".progress-bar").css("width", currentStep + "%").attr("aria-valuenow", currentStep);
});
$("#step4").click(function() {
currentStep = 100;
$(".progress-bar").css("width", currentStep + "%").attr("aria-valuenow", currentStep);
});
});
</script>
</body>
</html>
Conclusion
In essence, constructing a progress bar with multiple stages through Bootstrap is an uncomplicated technique that can tremendously enhance the user's experience of your web application. By adhering to the guidance explicated in this write-up, you will wield the ability to produce a striking and completely operational progress bar that truthfully conveys the advancement of your assignments. Whether you are an experienced web developer or a novice, leveraging Bootstrap to create a multi-phased progress bar is a valuable skill that can be exceedingly advantageous for your endeavors. Hence, do not delay in applying your freshly acquired proficiency and erecting a multi-phased progress bar immediately!
993 Views
