In this article, we will learn to create Progress bars using HTML and CSS. A Progress Bar is created by using two HTML “div”, the container (parent div), and the skill (child div) as shown in the following examples.
We will divide the article into two coding sections, in the first section we will work on HTML, and in the second section will design that progress bar.
The bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring units, etc. To create a progress bar we can use HTML and CSS.
bars usually include a numerical (percentage) and animated representation of the progress. This improves the clarity of the progress bar, adding to the user experience. This is why CSS progress bars are so valuable to UX/UI designers and developers.
Progress Bar Code Using CSS
from here you can use this code in your project for creating a progress bar. below this code, we explain every part of this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Progress Bar Example</title>
<style>
.progress-bar {
height: 24px;
width: 360px;
border-radius: 10px;
background-color: lightblue;
margin: 50px;
}
.progress-bar > div {
width: 0%;
height: 100%;
border-radius: 10px;
background-image: linear-gradient(to right, lightskyblue, blue);
background-size: 360px 100%;
transition: width 200ms;
}
</style>
</head>
<body>
<div class="progress-bar">
<div></div>
</div>
<script>
setInterval(myTimer, 1000);
function myTimer() {
console.log("Interval event");
const pb = document.querySelector(".progress-bar > div");
let progress = parseInt(pb.style.width, 10);
console.log("Widht Before: " + progress);
if (progress < 100) {
progress = progress + 10;
} else {
progress = 0;
}
console.log("Widht After: " + progress);
pb.style.width = progress + "%";
}
</script>
</body>
</html>
Step 1: Create A New File index.html
Let’s start in the first step to create a new simple index.html file with the following structure inside:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Progress Bar Example</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
Step 2: Add The HTML Structure Inside The Body Tag
Step 3: Add The CSS Code
So with the two div elements available in our HTML code we can start to add the need CSS code within the style element as you can see in the following code listing:
<style>
.progress-bar {
height: 24px;
width: 360px;
border-radius: 10px;
background-color: lightblue;
margin: 50px;
}
.progress-bar > div {
width: 0%;
height: 100%;
border-radius: 10px;
background-image: linear-gradient(to right, lightskyblue, blue);
background-size: 360px 100%;
transition: width 200ms;
}
</style>
The progress-bar class contains the CSS code which is needed to style the progress bar itself in an unfilled state.
The inner div element is used to fill the bar. The width property is used to define to which extend the bar should be filled, by default we’re setting it to 0%, so that the bar is displayed unfilled. In the following we’ll register an interval function by using a few lines of JavaScript code which is increasing this property by 10% every second.
The progress bar should be filled with a gradient, so we’re making use of background-image and background-size.
Step 4: Add Some JS Code To Animate For Demonstration
Finally let’s a little bit of JavaScript code inside the script tag, so that we’re able to demonstrate how the progress bar filling state changes:
<script>
setInterval(myTimer, 1000);
function myTimer() {
console.log("Interval event")
const pb = document.querySelector('.progress-bar > div');
let progress = parseInt(pb.style.width,10);
console.log("Widht Before: " + progress);
if (progress < 100) {
progress = progress + 10;
} else {
progress = 0;
}
console.log("Widht After: " + progress);
pb.style.width = progress + '%';
}
</script>
Here we’re implementing a function myTimer which is registered by using the setInterval function to run every 1000 milliseconds (= every second). The purpose of this function is to increase the bar by 10% by changing the width styling property of the inner div element accordingly.
That’s it, now you can open index.html in your browser and you should be able to see the final Progress Bar result as output.
If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.
if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section.
written by – Ninja_webTech
Top comments (1)
This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
International schools in Hyderabad