Telegram Group Join Now
ADVERTISEMENT
How To Create A Progress Bar With CSS Just In 2 Minutes
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.
ADVERTISEMENT
ADVERTISEMENT
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 unit, etc. To create a progress bar we can use HTMLĀ andĀ CSS.
ADVERTISEMENT
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.
ADVERTISEMENT
Html + CSS + JavaScript 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
ADVERTISEMENT
You Might Like This:
- Dark Mode Toggle Button
- Build your own Tip Calculator
- Portfolio Website Using Html And Css
- Word Guessing Game in HTML CSS & JavaScript
- Popup Box with Html, CSS and JavaScript
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:
ADVERTISEMENT
<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.
ADVERTISEMENT
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.
HTML + CSS Output ( Nothing šš )
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:
ADVERTISEMENT
<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.
ADVERTISEMENT
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.
ADVERTISEMENT
Final OutputĀ
ADVERTISEMENT
Source codeĀ
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.
ADVERTISEMENT
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
ADVERTISEMENT