Creating Progress Bar using JavaScript
Last Updated :
27 Jun, 2024
A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words, we can say that Progress Bars can be used to depict the status of anything that is in progress. There are several approaches to creating a progress bar using JavaScript.
Updating the Width of an HTML Element
It Update the width of a <div> element dynamically to represent progress.
Example: To demonstrate creating a progress bar by updating the width of an HTML element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Example - Approach 3</title>
<style>
.progress-bar {
width: 100%;
background-color: #f0f0f0;
height: 30px;
margin-bottom: 10px;
}
.progress {
width: 0%;
height: 100%;
background-color: #4caf50;
transition: width 0.3s ease;
}
</style>
</head>
<body>
<h2>Progress Bar - Approach 3</h2>
<div class="progress-bar">
<div id="progress" class="progress"></div>
</div>
<button onclick="increaseProgress()">Increase Progress</button>
<button onclick="resetProgress()">Reset</button>
<script>
const progressBar = document
.getElementById('progress');
let currentProgress = 0;
function increaseProgress() {
if (currentProgress < 100) {
currentProgress += 10;
progressBar
.style
.width = currentProgress + '%';
}
}
function resetProgress() {
currentProgress = 0;
progressBar.style.width = '0%';
}
</script>
</body>
</html>
Output:
OutputUsing HTML5 progress Element
One can use the <progress> element in HTML5 to represent progress in the progress bar. Which has built-in support for displaying and updating progress.
Example: To demonstrate creating progress bar using HTML5 <progress> element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Progress Bar Example - Approach 2</title>
</head>
<body>
<h2>Progress Bar - Approach 2</h2>
<progress id="progress" value="0" max="100"></progress>
<button onclick="increaseProgress()">Increase Progress</button>
<button onclick="resetProgress()">Reset</button>
<script>
const progressElement = document
.getElementById("progress");
function increaseProgress() {
if (progressElement.value < 100) {
progressElement.value += 10;
}
}
function resetProgress() {
progressElement.value = 0;
}
</script>
</body>
</html>
Output:
OutputUsing JavaScript
One can customize the JavaScript to update a visual representation of progress.
Example: To demonstrate creating progress bar using JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Progress Bar Example</title>
<style>
.progress-bar {
width: 500px;
background-color: #f0f0f0;
height: 30px;
margin-bottom: 10px;
border-radius: 15px;
}
.progress {
width: 0px;
height: 100%;
background-color: #4caf50;
transition: width 0.3s ease;
}
</style>
</head>
<body>
<h2>Progress Bar</h2>
<div class="progress-bar">
<div id="progress" class="progress"></div>
</div>
<button onclick="increaseProgress()">Increase Progress</button>
<button onclick="resetProgress()">Reset</button>
<script>
const progressBar = document.getElementById("progress");
let currentProgress = 0;
function increaseProgress() {
if (currentProgress < 100) {
currentProgress += 5;
progressBar.style.width = currentProgress + "px";
}
}
function resetProgress() {
currentProgress = 0;
progressBar.style.width = "0px";
}
</script>
</body>
</html>
Output:
Output
Similar Reads
How to Create a Progress Bar using HTML? To create the progress bar of a task by using a <progress> tag. It is used to represent the progress of a task. It is also defined as how much work is done and how much is left. It is not used to represent the disk space or relevant query. Syntax:<progress attributes...> </progress
2 min read
How to set/get the value of Progress Bar using JavaScript ? In this article, we are creating the progress bar of a task by using a <progress> tag. The <progress> tag is used to represent the progress of a task. It is also defined how much work is done and how much is left to download a thing. It is not used to represent the disk space or relevant
2 min read
How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit
2 min read
Foundation CSS Kitchen Sink Progress Bar Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass
2 min read
How to make progress bar chart using jQuery? Creating a progress bar chart using jQuery can significantly enhance the visual representation of your data. Whether you are showcasing the age distribution of a group of people or the marks of students in various subjects, a progress bar chart offers an intuitive and visually appealing way to prese
2 min read