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.
<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.
.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.
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</code>
<code> 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.
Output - Building a dynamic progress bar with a countdown timer using JavaScript and CSS - Clue Mediator
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.