CODEWITHSUNDEEP
htmlprogress-bar
techie
techie

Reputation: 219

HTML5 progress bar animation

I am using an HTML5 progress bar in my app. I would like to know if there is any way to control the animation speed of the progress bar. I want to show the progress after a certain interval, which I did using the setTimeout method of javascript so that it sets the value after the screen has been rendered. But the animation is too fast. Is there any way to control it?

Thanks.

Upvotes: 0

Views: 14559

Answers (3)

stdout123
stdout123

Reputation: 43

Mantas' answer above looks good and works (without having to use jQuery), but I wonder if we could also use the setTimeout function? Would setTimeout in a recursive function that exits after 100 iterations also work? Copying Mantas' code from above and changing it a little:

JavaScript:

function onWindowLoad(){ // to be called by onload event
    var bar = document.getElementById("progressBar");
    addOne();
}

function addOne() {
    if (bar.value < 100) { // this is the max value of the bar and the # of iterations
        setTimeout(addOne, 80); // this literal value controls the speed
        bar.value += 1;    
    }else{  
        return;
    } 
}

HTML:

<progress id="progressBar" max="100" value="0"></progress>

Upvotes: 0

Mantas Vaitkūnas
Mantas Vaitkūnas

Reputation: 744

Here is example. JavaScript function:

window.onload = addTenPercent();

function addTenPercent() {
    var bar = document.getElementById("progressBar");
    setInterval(addTenPercent, 100);
    bar.value += 5;
};

HTML:

<progress id="progressBar" max="100" value="0"></progress>

Upvotes: 1

Thomas
Thomas

Reputation: 1821

I'm not sure I understand what you mean by "animation" but here is an example of using the progress bar while controlling the speed of progression: http://jsfiddle.net/526hM/

Html:

<progress max="200" value="1"></progress>
<div id="val"></div>

Script:

$(document).ready(function(){
    var interval = 2, //How much to increase the progressbar per frame
        updatesPerSecond = 1000/60, //Set the nr of updates per second (fps)
        progress =  $('progress'),
        animator = function(){
            progress.val(progress.val()+interval);
            $('#val').text(progress.val());
            if ( progress.val()+interval < progress.attr('max')){
               setTimeout(animator, updatesPerSecond);
            } else { 
                $('#val').text('Done');
                progress.val(progress.attr('max'));
            }
        }

    setTimeout(animator, updatesPerSecond);
});

Upvotes: 4

Related Questions