How to make animated progress bar continuous?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>