Then we will create a countdown. While running the countdown our progress bar will get loaded with time.
In order to create this progress bar countdown or reverse stopwatch, we need to do several things.
First of all, we have to create a progress bar. Let’s do it.
<progress value="0" max="10" id="pbar" ></progress>
Here value is assigned with zero because we want to start the progress bar counter with zero.
Max value is here 10. The progress bar starts with zero and can go up to 10.
In this p tag area, we gonna print 10 and then 9 and 8 and so on. That means a countdown like 10 9 8 7 6 5 4 3 2 1 0
You may also get interset in,
We have used setInterval function to call a function at specified intervals.
1000 is our interval time in milliseconds or we can say it as a one-second interval.
As it is a countdown of 10 seconds in this example so progress bar max value to be 10 and interval to be 1 seconds. Thus 10/1= 10, You can either set the progress bar max value to 100 and interval to be 100 milliseconds. The result will be the same but the difference is that in this case, the countdown will be from 100 to 0 and the time to execute the countdown will be 10 seconds.
I will suggest you to change the values of interval time and progress bar max value to see how this is working. It will help you to understand easily.
The below is the example of the simple countdown with onclick button. Just test it on your browser and modify as per your wish to have some fun.
Here is the full code.