html - HTML5 進行状況バーのアニメーション

Question

アプリで HTML5 プログレス バーを使用しています。プログレス バーのアニメーション速度を制御する方法があれば教えてください。画面がレンダリングされた後に値を設定するように、javascript の setTimeout メソッドを使用して、特定の間隔の後に進行状況を表示したいと考えています。しかし、アニメーションが速すぎます。それを制御する方法はありますか？

ありがとう。

Answer 1

「アニメーション」の意味がよくわかりませんが、進行速度を制御しながらプログレスバーを使用する例を次に示します: http://jsfiddle.net/526hM/

HTML:

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

脚本：

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

Answer 2

これが例です。JavaScript 関数:

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>