How to Create a Progress Bar using HTML, CSS, and JavaScript
In this tutorial, you'll learn how to create a simple and animated progress bar using HTML, CSS, and a bit of JavaScript. This project is great for beginners and can be added to any website or app that requires a visual progress indicator.
HTML Structure
The basic structure of the progress bar is simple. We need a container to hold the progress bar and a button to start the progress.
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<button onclick="startProgress()">Start Progress</button>
CSS Styling
Next, we add some CSS to style the progress bar. The container will hold the progress bar, and the bar itself will be animated to increase its width as the progress happens.
.progress-container {
width: 100%;
background: #ddd;
border-radius: 5px;
overflow: hidden;
margin: 20px 0;
}
.progress-bar {
height: 30px;
width: 0;
background: #4caf50;
transition: width 0.5s ease;
}
JavaScript Functionality
Now, let's add a simple JavaScript function to control the progress. When the user clicks the button, the width of the progress bar will increase gradually until it reaches 100%.
let progress = 0;
function startProgress() {
progress = 0;
const progressBar = document.getElementById('progressBar');
const interval = setInterval(() => {
if (progress >= 100) {
clearInterval(interval);
} else {
progress++;
progressBar.style.width = progress + '%';
}
}, 50);
}
Demo
Full HTML, CSS, and JavaScript Code
Here’s the full code for creating this progress bar. Copy and paste the code into your editor and run it to see the progress bar in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar</title>
<style>
.progress-container {
width: 100%;
background: #ddd;
border-radius: 5px;
overflow: hidden;
margin: 20px 0;
}
.progress-bar {
height: 30px;
width: 0;
background: #4caf50;
transition: width 0.5s ease;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<button onclick="startProgress()">Start Progress</button>
<script>
let progress = 0;
function startProgress() {
progress = 0;
const progressBar = document.getElementById('progressBar');
const interval = setInterval(() => {
if (progress >= 100) {
clearInterval(interval);
} else {
progress++;
progressBar.style.width = progress + '%';
}
}, 50);
}
</script>
</body>
</html>
Final Thoughts
And that's it! You've just created a simple progress bar using HTML, CSS, and JavaScript. You can easily customize the appearance of the bar by modifying the CSS styles. This is a great way to add visual feedback to your web apps and improve user experience.
Download the Code
You can download the full source code from the following link:
Download Progress Bar Source Code