Question

0

243

Vistas

How to make animated progress bar continuous?

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>

over 4 years ago · Santiago Trujillo

2 Respuestas

Responde la pregunta

0

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>

over 4 years ago · Santiago Trujillo Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-03-25T16:01:24.081Z

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>

0

243

How to make animated progress bar continuous?

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT