Animated progress bar with number counter by HTML, CSS and JavaScript.

Anonymous
6 Oct, 2025
JavaScript number counter is very necessary idea among the developer. It is mandatory concepts almost in every single project which is made with JavaScript. Today I gonna explain a magic idea of counting number or data in JavaScript in a animated way. I gonna explain a animated JavaScript progress bar with number count.  

javascript javascript project

HTML

To do this project we need a code editor, in this case i am using VS Code. Open a blank folder and create a file called  index.html  or any other named you prefer with the  .html  extension. So that we can write HTML code in this file. Open index.html and start writing your very first Html 5 code. After writing the basic template of Html 5, you need to create a  div  element with a class named  container . Inside this container div we will define all of others elements that needed.
After that we need to create a  div  element with a class named  barContainer .  barContainer  div will cover the whole progress bar and its title. The  h2  tag hold the bar title. Inside the  barContainer  we need to create a new  div  which is actual bar. Inside the  bar  element we have a  span  tag with a attribute called  data-num . This  attribute  value will be use for every element individuals data.
Now we need to copy this block of code which is refers to the whole Bar. I need 5 Bar so that i paste it 5 times. After that, my code look like this. You have to!

CSS

Alright, we just finished writing Html for our project. Now we need to write some  CSS  code to style the page. At first we will write some common CSS code for better styling. We need to resize the browser's default  margin  and  padding . Action will be the same for the page body. To do this we need to write the code bellow. 
After that we need to design our main container which is containing the whole elements. It should be centered and middled. That's why we used  position:absolute; . To centering the elements we used  display:flex; .
After designing the main container we are going to design the Bar container which is containing the whole Bar. Its simple and easy. Look it down!
Yeah! we already design the Bar's title and Bar container itself. Now its time to design the main Bar. The  .bar  div element is used the contain the  .per  div. So we need to fix the positioning between them. In this regard, the  .bar  div is a mother and the  .per  div is a child. We will set the width of  .bar  div 100% fixed. The  .per  div width will be change via JavaScript code.
The  .per  element's position will be  absolute  of the  .bar  div. It's means that these to elements will stay in the same position.

JavaScript

That's awesome that we have finished the CSS also. Now we are going to write some JavaScript code so that we can count our  .per  element's attribute  data-num 's value. And also we gonna want to set the width of every element. To do this we can declare a variable called  data  (you can prefer any valid name). Actually this  data  variable is a  array . Because we select all elements using  querySelectorAll()  method. This array is currently containing 5  .per  elements. 
To catch every  .per  element we have use a method called  forEach() . By doing this we can access the every  .per  element. These method have two  arguments , the first arguments ( val ) represent the element and second one ( i ) its index or position in the array.
After that, we caught the every  .per  element's first attribute  data-num . Then convert it into a number using the  Number()  method. We define the output elements for counter number output. Then create a function called  countTo()  to count the number and set the width of .per element. And called the function at last.
The  countTo()  function take one argument which is the  .per  element attribute's number.
Then declare a variable called  step  to check whether the input number or count number is grater than 0. If this condition return true the  step  variable would be positive 1 otherwise negative 1. And finally, we declare a variable named  counter  which is contain a anonymous function with a method of  setInterval() . This function will count and store the number with a specific time interval and set the value to be output. This also set the width of the element.
That's how we have made a JavaScript progress bar using Html, CSS and JavaScript. If you have any question or doubts feel free to comment bellow. There is a YouTube tutorial video bellow. If it's difficult to understand the blog please watch my video. I hope it will be more better for understanding.

Love to see you here! Thank you.
Next Post Previous Post
No Comment
Add Comment
comment url