HTML Progress Bar with Percentage
A progress bar is a graphical representation of the progress of a task over time. It is used to visualize the progression of an operation.
Progress bars are used in many places like file upload, file download, quiz test, etc.
You can show the progress of task in terms of percentage or simple growth in size.
In this tutorial, you will learn how to create a progress bar with percentage using HTML.
1. Static Progress Bar
Let's start with simple one. This is a static progress bar, it will not show the progress of any task but current state of the task.
To create a progress bar you can use <progress> tag. But here we will use <div> tags to create it.
Start with creating a <div> element with class container and inside it create another <div> element with class progress-bar also add progress percentage inside it.
<div class="container">
<div class="progress-bar">35%</div>
</div>Now, Lets add some CSS to make it look like a progress bar.
.container {
width: 100%;
background-color: #ddd;
}
.progress-bar {
width: 35%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}You can see we set the width of .progress-bar to 35%, so it will show the progress of task upto 35%.
Here is complete code for static progress bar.
Example 1
<html>
<head>
<title>Static progress bar</title>
<style>
.container {
width: 100%;
background-color: #ddd;
}
.progress-bar {
width: 35%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="progress-bar">35%</div>
</div>
</body>
</html>Output:
2. Dynamic Progress Bar
Now, let's create a dynamic progress bar. It will show the increase in progress of the progress bar.
We are going to add a button which when clicked will show the progress of the progress bar.
Our HTML part is going to be same as above, we just need to add a button.
<div class="container">
<div class="progress-bar">35%</div>
</div>
<button onclick="progress()">Increase Progress</button>Now add JavaScript function which will show gradual increase in progress of the progress bar.
function progress() {
var elem = document.getElementsByClassName("progress-bar")[0];
var width = 1;
var id = setInterval(progress, 10);
function progress() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width * 1 + "%";
}
}
}The above function is going to increase the width of the progress bar by 1% every 10 milliseconds until it reaches 100%.
Every time the width of the progress bar changes, we also need to change the text inside it. So, we are also changing the text inside the progress bar.
Here is complete code for dynamic progress bar.
Example 2
<html>
<head>
<title>Dynamic progress bar</title>
<style>
.container {
width: 100%;
background-color: #ddd;
border-radius: 15px;
}
.progress-bar {
width: 0;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
border-radius: 15px;
}
button {
margin-top: 20px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
background-color: #eee;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="progress-bar">0%</div>
</div>
<button onclick="progress()">Increase Progress</button>
<script>
function progress() {
var elem = document.getElementsByClassName("progress-bar")[0];
var width = 1;
var id = setInterval(progress, 10);
function progress() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width * 1 + "%";
}
}
}
</script>
</body>
</html>Output:
3. Progress bar with steps
Progress bar with steps will increase the progress of the progress bar in steps. You can set the steps according to your need.
For this example we are going to use data-steps attribute of <div> tag to set the steps.
Complete code for progress bar with steps is given below.
Example 3
<html>
<head>
<title>Progress bar in Steps</title>
<style>
.container {
width: 100%;
background-color: #ddd;
border-radius: 15px;
}
.progress-bar {
width: 0;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
border-radius: 15px;
transition: width 0.4s;
}
button {
margin-top: 20px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
background-color: #eee;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="progress-bar" data-steps="20, 35, 45, 57, 75, 100">0%</div>
</div>
<button onclick="progress()">Increase Progress</button>
<script>
var progress_bar = document.querySelector('.progress-bar');
var steps = progress_bar.getAttribute('data-steps').split(', ');
var current_step = 0;
function progress() {
if (current_step < steps.length) {
progress_bar.style.width = steps[current_step] + '%';
progress_bar.innerHTML = steps[current_step] + '%';
current_step++;
}
}
</script>
</body>
</html>Output:
4. Circular Progress Bar with Percentage
Here is a pen from Alex Marinenko on CodePen which shows a circular progress bar with percentage.
It contains 9 different circular progress bar each with some different animation and style.
See the Pen Pure CSS radial progress bar by Alex Marinenko (@jo-asakura) on CodePen.
5. Progress bar with tooltip
This is an animated progress bar with percentage of progress shown in a tooltip.
See the Pen bootstrap, progress-bar, tooltip,progress bar by A G (@valencia123) on CodePen.
Conclusion
By now you have seen various types of progress bar. With step by step guide of how to create them.
You can use any of them in your project according to your need.
Make some tweaks in the code and create your own progress bar. Happy Coding!