Learn how to build a responsive and dynamic progress bar using HTML and CSS and javascript explore more in this article
Table of Contents
What is Progress Bar?
Progress Bar is a graphical representation for visualizing the progress of any task suck as installation, file transfer, and even quizzes or assignments completions progress, etc.
The format for representing the progress depends on the developer. It can be in a pattern of percentage, step completion, etc.
In this article, you will be able to create a responsive and dynamic step by step progress bar using HTML, CSS, and JS.
Prerequisites
• Have basic knowledge of HTML, CSS, JavaScript.
• Install Visual Studio Code.
Creating and setting up Files
Step 1:
Create a folder for saving the files of your progress bar.
Step 2 :
Open the newly created folder in the Visual Studio Code.
Step 3:
Step 4:
Open index.html and type (if you have HTML Snippets extension, else download it by going to extinction in Visual Studio Code. For downloading, Click Here ).
! 
Step 5:
Now update the title to the one of your desire. In our case, we changed it to “ProgressBar”.
Step 6:
Add CSS and JavaScript files to your HTML file.
The syntax for adding CSS in your project:
<link rel="stylesheet" href="[your css filename].css" /> The syntax for adding JS in your project:
<script src="[your js filename].js"></script> This tag can be added inside the body of your HTML file.
Dynamic progress bar in HTML and CSS
HTML progress bar with steps
Step 1:
For HTML, you will start with making a div of section or container which will contain your remaining progress bars divs.
Step 2:
You will add a heading for the progress bar wrapped inside the h1 tags.
Step 3:
Step 4:
Inside the progress bar’s make another div for step class.
Step 5:
Step 6:
Create bullets class div inside the step class.
Step 7:
Step 8:
You have already added the required steps that are why buttons are needed to trigger the actions. That is why the addition of three buttons is necessary:
• Next button: Next button acts as going from one step to another.
• Previous button: The previous button can access the previous steps.
• Submit button: to submit the progress and reload the page (as we are not saving anything using the progress bar, it’s just a demo. So, it will only load the page).
You can add the button section div and add the three buttons inside it.
That’s all you have to do in an HTML file. The static structure of the progress bar is complete.
Now you can add styling and add functionality to your Static progress bar using the class and ids which you created inside the divs.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="progressbar.css" />
<title>Progress Bar</title>
</head>
<body>
<div class="Section">
<h1>Progress Bar</h1>
<div id="ProgressBar">
<div class="step">
<p class="text">STEP 1</p>
<div class="bullets">1</div>
</div>
</div>
<div id="ProgressBar">
<div class="step">
<p class="text">STEP 2</p>
<div class="bullets">2</div>
</div>
</div>
<div id="ProgressBar">
<div class="step">
<p class="text">STEP 3</p>
<div class="bullets">3</div>
</div>
</div>
<div id="button section">
<button id="Previous" >Previous</button>
<button id="Next">Next</button>
<button id="Submit" >Submit</button>
</div>
</div>
<script src="progressbar.js"></script>
</body>
</html>
Display
CSS progress bar with steps
Step 1:
Open your CSS file for styling the progress bar. You will need to style the following classes:
• Section: For styling overall progress bar section includes the progress bar its steps, bullets, and buttons.
• Progress Bar: For styling the contents of your progress bar.
• Step: Styling of bullets and their text.
• Bullets: Overall bullets, it’s before and after completion styling.
Step 2:
.Section {
text-align: center;
max-width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
Step 3:
Styling your progress bar as it holds your full progress bar content together.
#ProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 300px;
margin: 0 auto;
margin-bottom: 40px;
}
Step 4:
As your progress bar has steps/stages, its styling comes second to give a decent look.
.step {
text-align: center;
}
.text {
margin-bottom: 10px;
color: #0011ff;
}
Step 5:
.bullets {
border: 1px solid #0011ff;
height: 20px;
width: 20px;
border-radius: 100%;
color: #0011ff;
display: inline-block;
position: relative;
transition: background-color 500ms;
line-height: 20px;
}
.bullets.completed {
color: white;
background-color: #0011ff;
}
.bullets.completed::after {
content: "";
position: absolute;
right: -105px;
bottom: 10px;
height: 5px;
width: 105px;
background-color: #0011ff;
}
Display after adding CSS:
JavaScript
Step 1:
Get all the variables needed using document.getElementById() for getting the elements using there id to fetch it and […document.querySelectorAll()] to select/copy all the bullets from HTML file to an array. As you need access to three buttons and bullets to the progress bar.
const Btnprevious = document.getElementById('Previous');
const Btnnext = document.getElementById('Next');
const Btnsubmit = document.getElementById('Submit');
const bullets = [...document.querySelectorAll('.bullets')]; Step 2:
You will need two variables for working with buttons. A current for tracking the current step bullet that will be a variable as it will keep changing when you make the transition from one step to another or vice versa. A max variable will be constant because you will be using it as a reference only.
let current = 0;
const max = 2;
Step 3:
As initially your current position is one and to go to the next step you will need the next button but as you are nowhere near the finish and there is no previous step to go on. Hence, initially, you will keep previous and finish buttons display to none.
Btnprevious.style.display = 'none';
Btnsubmit.style.display = 'none'; Step 4:
Now, you will have to add functionality to the buttons starting from the next button. You will addEventListener() method. So, whenever the user clicks on the Next button. The method shown below will get triggered.
Btnnext.addEventListener('click', () => {
bullets[current].classList.add('completed');
current += 1;
Btnprevious.style.display = 'inline';
if (current === max) {
Btnnext.style.display = 'none';
Btnsubmit.style.display = 'inline';
}
}); You can see from the code, initializing the bullet by indexing it with the current variable and add that bullet to the completed class. As going from one step to another means that the current position has to be updated as well. Now, as you are a step ahead, which means the previous button should become enabled.
That is why now make its display inline. You will have to add a condition where when the current variable is equal to max next button should disappear (as there are no steps ahead). Hence, the finish button should appear.
Step 5:
Using same addEventListener() method add functionality on previous button.
Btnprevious.addEventListener('click', () => {
bullets[current - 1].classList.remove('completed');
current -= 1;
Btnsubmit.style.display = 'none';
Btnnext.style.display = 'inline';
if (current === 0) {
Btnprevious.style.display = 'none';
}
}); As shown above, decrement one in the current variable, remove that bullet from the completed class, and update the current position.
Technically, you become one step away from finishing the task as well when you go one step back. That is why the previous button will disappear when it is triggered.
As you can one step back means you will have to go one step further to get close to the finishing bullet, that’s why whenever the previous button is triggered next button display will be enabled.
You will have to add a condition to make the previous button disappear when the current variable is equal to 0 as it is the starting index. There will be no previous steps when your current step is from where you started progressing.
Step 6:
Btnsubmit.addEventListener('click', () => {
location.reload();
}); Display
