How to make animated progress bar continuous?

Question

I have an animated progress bar associated with a countdown timer.

Currently, the animation of the progress bar is discrete .

How do I make it to be continuous without changing other logic in the code ?

Also, is it possible to create the timer with requestAnimationFrame (like the way the animated progress bar is created) instead of the current setInterval ?

 var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / TIME_LIMIT; id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; id("timer").textContent = formatTime(timeLeft); if (timeLeft == 0) { clearInterval(timer); } }, 1000); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10)? ("0" + m): m; s = (s < 10)? ("0" + s): s; return `${m}:${s}`; }

 #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; }

 <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>

Answer 1

Add transition: width 1s; to your #progress-bar-inner :

 var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / TIME_LIMIT; id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; id("timer").textContent = formatTime(timeLeft); if (timeLeft == 0) { clearInterval(timer); } }, 1000); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10)? ("0" + m): m; s = (s < 10)? ("0" + s): s; return `${m}:${s}`; }

 #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; transition: width 1s; }

 <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>

Answer 2

Your timer setInterval function operates in seconds. You need to change the interval, and therefore change the value of TIMELIMIT to match.

 var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT*100; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / (TIME_LIMIT*100); id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed += 1; timeLeft = TIME_LIMIT*100 - timePassed; id("timer").textContent = formatTime(Math.ceil(timeLeft/100)); if (timeLeft == 0) { clearInterval(timer); } }, 10); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10)? ("0" + m): m; s = (s < 10)? ("0" + s): s; return `${m}:${s}`; }

 #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; }

 <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>