CODEWITHSUNDEEP
javascriptjquerytimerprogress-bar
Darius
Darius

Reputation: 612

jQuery progress timer bar

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?
    }
}

Upvotes: 9

Views: 30156

Answers (4)

fanfavorite
fanfavorite

Reputation: 5199

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);
    }
}

Upvotes: 13

SpYk3HH
SpYk3HH

Reputation: 22580

Simply do some good old fashioned math. It doesnt seem right because you're giving width percentage as the value of the "tick" which will eventually be 835000! Meaning you eventually have a width of "835000%"!!!

Example

var timer = 0,
    perc = 0,
    timeTotal = 835000,
    timeCount = 50;

function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').text(y + "%");
}

function animateUpdate() {
    if(perc < timeTotal) {
        perc++;
        updateProgress(perc);
        timer = setTimeout(animateUpdate, timeCount);
    }
}

$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        clearTimeout(timer);
        perc = 0;
        animateUpdate();
    });
});

Upvotes: 4

abc123
abc123

Reputation: 18853

jsFiddle Demo

Description

This just simply increases the progress every 10ms...since you know the time it takes, take that time and divide by 100 then make that your timeinterval in var timer = setInterval(updateProgressbar, 10);

HTML

<div id="progressbar"></div>

JS

var progress = 0;
var timer = setInterval(updateProgressbar, 10);

function updateProgressbar(){
    $("#progressbar").progressbar({
        value: ++progress
    });
    if(progress == 100)
        clearInterval(timer);
}

$(function () {
    $("#progressbar").progressbar({
        value: progress
    });
});

JS Fiddle Just for you

JS

var progress = 0;
var timer = setInterval(updateProgressbar, 8350);

function updateProgressbar(){
    $("#progressbar").progressbar({
        value: ++progress
    });
    if(progress == 100)
        clearInterval(timer);
}

$(function () {
    $("#progressbar").progressbar({
        value: progress
    });
});

Upvotes: 3

Perry
Perry

Reputation: 98

You probably want something like this:

var currentTime = new Date().getTime();
perc = (currentTime - StarTime)/duration;

If set StartTime like that too you can calculate the percentage on every update.

Upvotes: 0

Related Questions