Question

12

jQuery progress timer bar

rated 0 times [ 14] [ 2] / answers: 1 / hits: 29522 / 11 Years ago, fri, november 22, 2013, 12:00:00

I have a progress timer bar in jQuery - here is an example http://jsfiddle.net/6h74c/

If I have time values in milliseconds, (600000 = 10 minutes, 300000 = 5 minutes, etc), how can I make the bar increment for that period of time?

In the jsfiddle link, I'm trying to set the progress bar to increase for 835000ms.

However, the setTimeout() determines how often the bar will increase and it is also basing it off of width percentage, which doesn't seem accurate - should I be doing this differently?

function updateProgress(percentage) {

    $('#pbar_innerdiv').css(width, percentage + %); // probably not ideal

    $('#pbar_innertext').text(percentage + %);

}



function animateUpdate() {

    perc++;

    updateProgress(perc);

    if(perc < 835000) {

        timer = setTimeout(animateUpdate, 50); // probably not ideal either?

    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaydon

Add To Favorites

Follow

Total Points: 651

Total Questions: 103

Total Answers: 100

Location: Norway

Member since Mon, May 23, 2022

2 Years ago

answered 11 Years ago dustin · Accepted Answer

Fiddle Example

I would do something like:

var start = new Date();

var maxTime = 835000;

var timeoutVal = Math.floor(maxTime/100);

animateUpdate();



function updateProgress(percentage) {

    $('#pbar_innerdiv').css(width, percentage + %);

    $('#pbar_innertext').text(percentage + %);

}



function animateUpdate() {

    var now = new Date();

    var timeDiff = now.getTime() - start.getTime();

    var perc = Math.round((timeDiff/maxTime)*100);



    if (perc <= 100) {

        updateProgress(perc);

        setTimeout(animateUpdate, timeoutVal);

    }

}