How to make animated progress bar continuous?

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>

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>

How to make animated progress bar continuous?

Related

Recent Posts