CODEWITHSUNDEEP
javascriptjqueryprogress-bar
SoluableNonagon
SoluableNonagon

Reputation: 11755

JavaScript - updating progress bar - ensure that an function takes an amount of time

I have a simple progress bar on my page. It is updated every second (overkill probably), but there is no animation between updates.

Currently, updates look like this: 10% -> 15% -> 23% ... etc

I'd like the progress bar to be more fluid rather than jumping from one value to the next

function update() {
    current += 10; 
    // what can I do here to make the animation more fluid?
    // so that it looks like 10% -> 11% -> 12% 
    // similar to 'fast' animation or 'slow' animation
    $("progress").val(current);
    if (current >= max) clearInterval(interval);

    console.log(current);
};

http://jsfiddle.net/VFx3L/1/

I would ideally like the update from one value to the other to take one second. Can anyone point me in the right direction?

Upvotes: 1

Views: 288

Answers (1)

Adam Gunning
Adam Gunning

Reputation: 96

Just reduce update to add 1 instead of 10 this makes smaller steps, then decrease interval to 100.. this creates a more fluid bar 

$(function () {
    var current = 0;
    var max = 100;

    function update() {
        current += 1; 
        // what can I do here to make the animation more fluid?
        $("progress").val(current);
        if (current >= max) clearInterval(interval);

        console.log(current);
    };
    var interval = setInterval(update, 100); //choose how fast to update
});

See new Fiddle http://jsfiddle.net/72SG9/

Thanks

Adam

Upvotes: 2

Related Questions