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.

回答1:

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

回答2:

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>

回答3:

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>

来源：https://stackoverflow.com/questions/11078726/html5-progress-bar-animation

标签

html5

progress-bar