Building a dynamic progress bar with a countdown timer using JavaScript and CSS
A progress bar is a graphical representation of the progression of a task. It provides visual feedback to the user about the status of a process. In this tutorial, we will build a dynamic progress bar with a countdown timer using JavaScript and CSS. The progress bar will change dynamically based on the remaining time of the countdown.
Steps to create a dynamic progress bar with a countdown timer
- Prerequisites
- Creating the HTML Structure
- Styling the Progress Bar
- Implementing the Countdown Timer
- Output
1. Prerequisites
To follow this tutorial, you need to have basic knowledge of HTML, CSS, and JavaScript.
2. Creating the HTML Structure
First, let’s create the HTML structure for the progress bar and the countdown timer. We will use a div element to create the progress bar and a span element to display the countdown timer.
1 2 3 4 5 | <div class="progress-bar"> <div class="progress"></div> </div> <span class="countdown"></span> |
3. Styling the Progress Bar
Next, we will style the progress bar using CSS. We will set the width and height of the progress bar and give it a background color. We will also add some styles to the progress bar that will change dynamically based on the remaining time of the countdown.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .progress-bar { width: 300px; height: 20px; background-color: #f2f2f2; position: relative; } .progress { height: 100%; background-color: #4caf50; position: absolute; top: 0; left: 0; width: 0%; } |
4. Implementing the Countdown Timer
Now, let’s implement the countdown timer using JavaScript. We will create a function that will decrement the remaining time by one second and update the countdown timer and the progress bar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | const countdownEl = document.querySelector(".countdown"); const progressBarEl = document.querySelector(".progress"); let remainingTime = 60; // seconds const totalTime = remainingTime; function countdown() { if (remainingTime > 0) { // update countdown timer countdownEl.textContent = remainingTime; // update progress bar const progress = ((totalTime - remainingTime) / totalTime) * 100; progressBarEl.style.width = `${progress}%`; remainingTime--; setTimeout(countdown, 1000); } else { // countdown finished progressBarEl.style.width = "100%"; countdownEl.textContent = "Time's up!"; } } countdown(); |
In the above code, we first select the countdown and progress elements using document.querySelector(). We then set the remainingTime variable to 60 seconds and the totalTime variable to the same value.
The countdown() function checks if the remainingTime is greater than zero. If it is, it updates the countdown timer and the progress bar. It then decrements the remainingTime by one second and sets a timeout of one second to call the countdown() function again. If the remainingTime is zero, it sets the countdown timer to “Time’s up!”.
5. Output
Run the code and check the output in the browser.
Conclusion
In this tutorial, we learned how to build a dynamic progress bar with a countdown timer using JavaScript and CSS. The progress bar changes dynamically based on the remaining time of the countdown. You can customize the styles and duration of the countdown timer to suit your needs.
