In this article, we will create a multi step progress bar using Bootstrap and jQuery.
What are Bootstrap & jQuery? – Multi step progress bar
Bootstrap and jQuery are two popular front-end web development tools that enhance the efficiency and functionality of building websites.
Bootstrap is a widely-used CSS framework that provides pre-designed templates and components for creating responsive, mobile-first web pages. It includes a comprehensive library of HTML, CSS, and JavaScript elements like navigation bars, buttons, forms, and modals. Bootstrap simplifies the design process by offering a cohesive and consistent look across different browsers and devices, allowing developers to build professional-looking websites quickly.
jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal, event handling, animation, and Ajax interactions. It provides an easy-to-use API that works across a multitude of browsers, making it easier to write JavaScript code. jQuery’s core features include DOM manipulation, event handling, and simplified Ajax requests, which help streamline client-side scripting tasks.
Multi step progress bar – Together, Bootstrap and jQuery form a powerful duo for front-end web development, enabling developers to create dynamic, responsive, and visually appealing websites with less effort.
Additionally, we will leverage jQuery for DOM manipulation. The multi step progress bar is a versatile tool for visualizing the quantity of work completed. The strength of the progress bar indicates the progress of the task.
Multi-step progress bars are commonly used in online web apps like YouTube, GitHub, etc., to show how much of the page has loaded. You can also find a multi step progress bar while downloading or uploading content to a web app.
Using a multi-step progress bar helps in displaying the progress of work in a step-by-step format, providing a clear and structured visualization of task completion.
For example:
Step1 -> Step2 -> Step3 -> Finished
Each step has a progress bar that shows its progress to reach the next step.
To create the multi-step progress bar, let’s create 3 files bar.html, styleee.css, javs.js(in my case, you can change the names of the html, css and js file and save it)
bar.html
<!DOCTYPE html>
<html>
<head>
<link href=
'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<script src=
'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'>
</script>
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<link rel="stylesheet" href="styleee.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-sm-9 col-md-7
col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2">
<div class="px-0 pt-4 pb-0 mt-3 mb-3">
<form id="form">
<ul id="progressbar">
<li class="active" id="step1">
<strong>Step 1</strong>
</li>
<li id="step2"><strong>Step 2</strong></li>
<li id="step3"><strong>Step 3</strong></li>
<li id="step4"><strong>Step 4</strong></li>
</ul>
<div class="progress">
<div class="progress-bar"></div>
</div> <br>
<fieldset>
<h2>Welcome To coding Step 1</h2>
<input type="button" name="next-step"
class="next-step" value="Next Step" />
</fieldset>
<fieldset>
<h2>Welcome To coding Step 2</h2>
<input type="button" name="next-step"
class="next-step" value="Next Step" />
<input type="button" name="previous-step"
class="previous-step"
value="Previous Step" />
</fieldset>
<fieldset>
<h2>Welcome To coding Step 3</h2>
<input type="button" name="next-step"
class="next-step" value="Final Step" />
<input type="button" name="previous-step"
class="previous-step"
value="Previous Step" />
</fieldset>
<fieldset>
<div class="finish">
<h2 class="text text-center">
<strong>FINISHED</strong>
</h2>
</div>
<input type="button" name="previous-step"
class="previous-step"
value="Previous Step" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
<script src="javs.js"></script>
</html>
styleee.css
* {
margin: 0;
padding: 0
}
html {
height: 100%
}
h2{
color: #2F8D46;
}
#form {
text-align: center;
position: relative;
margin-top: 20px
}
#form fieldset {
background: white;
border: 0 none;
border-radius: 0.5rem;
box-sizing: border-box;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative
}
.finish {
text-align: center
}
#form fieldset:not(:first-of-type) {
display: none
}
#form .previous-step, .next-step {
width: 100px;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 0px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px 10px 0px;
float: right
}
.form, .previous-step {
background: #616161;
}
.form, .next-step {
background: #2F8D46;
}
#form .previous-step:hover,
#form .previous-step:focus {
background-color: #000000
}
#form .next-step:hover,
#form .next-step:focus {
background-color: #2F8D46
}
.text {
color: #2F8D46;
font-weight: normal
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: lightgrey
}
#progressbar .active {
color: #2F8D46
}
#progressbar li {
list-style-type: none;
font-size: 15px;
width: 25%;
float: left;
position: relative;
font-weight: 400
}
#progressbar #step1:before {
content: "1"
}
#progressbar #step2:before {
content: "2"
}
#progressbar #step3:before {
content: "3"
}
#progressbar #step4:before {
content: "4"
}
#progressbar li:before {
width: 50px;
height: 50px;
line-height: 45px;
display: block;
font-size: 20px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 10px auto;
padding: 2px
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 25px;
z-index: -1
}
#progressbar li.active:before,
#progressbar li.active:after {
background: #2F8D46
}
.progress {
height: 20px
}
.progress-bar {
background-color: #2F8D46
}
javs.js
$(document).ready(function () {
var currentGfgStep, nextGfgStep, previousGfgStep;
var opacity;
var current = 1;
var steps = $("fieldset").length;
setProgressBar(current);
$(".next-step").click(function () {
currentGfgStep = $(this).parent();
nextGfgStep = $(this).parent().next();
$("#progressbar li").eq($("fieldset")
.index(nextGfgStep)).addClass("active");
nextGfgStep.show();
currentGfgStep.animate({ opacity: 0 }, {
step: function (now) {
opacity = 1 - now;
currentGfgStep.css({
'display': 'none',
'position': 'relative'
});
nextGfgStep.css({ 'opacity': opacity });
},
duration: 500
});
setProgressBar(++current);
});
$(".previous-step").click(function () {
currentGfgStep = $(this).parent();
previousGfgStep = $(this).parent().prev();
$("#progressbar li").eq($("fieldset")
.index(currentGfgStep)).removeClass("active");
previousGfgStep.show();
currentGfgStep.animate({ opacity: 0 }, {
step: function (now) {
opacity = 1 - now;
currentGfgStep.css({
'display': 'none',
'position': 'relative'
});
previousGfgStep.css({ 'opacity': opacity });
},
duration: 500
});
setProgressBar(--current);
});
function setProgressBar(currentStep) {
var percent = parseFloat(100 / steps) * current;
percent = percent.toFixed();
$(".progress-bar")
.css("width", percent + "%")
}
$(".submit").click(function () {
return false;
})
});
Output:
Conclusion
Creating a multi-step progress bar using Bootstrap and jQuery is a practical approach to enhancing user experience in web applications. Multi-step progress bars effectively display the progress of tasks that involve multiple stages, providing users with a clear understanding of where they are in the process and how much more they need to complete.
Key Points for Multi step progress bar:
- User Experience: Multi-step progress bars significantly improve user experience by providing visual feedback, reducing uncertainty, and setting clear expectations about the progress of ongoing tasks. This is particularly important in scenarios where users need to complete multi-stage forms, surveys, or onboarding processes.
- Bootstrap’s Versatility: Utilizing Bootstrap simplifies the development process, as it provides a robust set of pre-designed components and responsive design capabilities. Bootstrap’s progress bar component can be easily customized to fit the specific requirements of a multi-step progress bar, ensuring consistency and visual appeal across different devices and screen sizes.
- jQuery for Dynamic Interactions: Leveraging jQuery for DOM manipulation enhances the interactivity of the progress bar. jQuery allows for smooth transitions between steps, dynamic updates based on user input, and real-time feedback, all of which contribute to a more engaging and responsive user interface.
- Practical Applications: Multi-step progress bars are widely used in various online applications, such as e-commerce checkouts, account registrations, and content uploads. Implementing a multi-step progress bar can reduce user drop-off rates by making long or complex processes more manageable and visually appealing.
- Customization and Flexibility: The combination of Bootstrap and jQuery offers extensive customization options, enabling developers to tailor the multi-step progress bar to their specific needs. This includes adjusting the appearance, adding animations, and integrating additional functionality, such as validation checks at each step.
Final Thoughts
Implementing a multi-step progress bar using Bootstrap and jQuery is a valuable addition to any web application that involves multi-stage processes. It enhances user experience, provides clear visual feedback, and ensures that users remain engaged throughout the process. By leveraging the power of Bootstrap and jQuery, developers can create intuitive, responsive, and visually appealing progress bars that cater to the needs of their users.
Leave a Reply