JavaScriptプログレスバーの進捗をどのように増やすのですか？

Question

私はウェブサイトに簡単なjavascriptプログレスバーを追加しようとしていますが、いくつかのスクリプトが見つかりましたが、私はいつも同じ問題に遭遇しています。ローダーを初期化して、それは段階的です。ここでは簡単な例である - https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

終わりにあります：

bar.animate(1.0); 

は、どのように私はそれを段階的にアニメーション持つことができますか？最初から50％を（2秒後に）75％から100％と言います。私は

bar.animate(0.5); 
bar.animate(0.75); 
bar.animate(1); 

と同様に試してみた：

setTimeout(function(){bar.animate(0.5)}, 2000); 
setTimeout(function(){bar.animate(0.75)}, 2000); 
setTimeout(function(){bar.animate(1)}, 2000); 

を、それは常に代わりに段階的にアニメ化されているの最後（最高）値を、選択します。アドバイスが得られました。

Answer 1

bar.animate(0.5); 
bar.animate(0.75); 
bar.animate(1); 

上記のコードは同時に実行され、最後のコードは他のコードよりも優先されます。

setTimeout(function(){bar.animate(0.5); console.log("animate")}, 2000); 
    console.log('timeout 1 called'); 
setTimeout(function(){bar.animate(0.75); console.log("animate")}, 2000); 
    console.log('timeout 2 called'); 
setTimeout(function(){bar.animate(1); console.log("animate")}, 2000); 
    console.log('timeout 3 called'); 

すぐに最初のタイムアウトが設定されているため、次の設定を行う前に遅延を待つことはありません。コンソール上のログを調べて、何が起こっているかを確認します。

問題は、これらのスクリプトが同時に実行されることです。あなたはそれのために配列中にバーをアニメーション化したい場合、あなたはあまりにもCSSでキーフレームを行うことができます

bar.animate(0.5); // Number from 0.0 to 1.0 
setTimeout(function() { 
    bar.animate(0.75); 
}, 2000); 

setTimeout(function() { 
    bar.animate(1.0); 
}, 4000); 

：このような何か（またはより良いものを）行います。

Answer 2

問題は、本質的に、すべての手順を同時に実行することです。代わりに、animate関数にコールバックを渡したいので、終了したら次のステップに移動するように指示できます。

// progressbar.js@1.0.0 version is used 
 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 
 

 
var bar = new ProgressBar.Line(container, { 
 
    strokeWidth: 4, 
 
    easing: 'easeInOut', 
 
    duration: 1400, 
 
    color: '#FFEA82', 
 
    trailColor: '#eee', 
 
    trailWidth: 1, 
 
    svgStyle: { 
 
    width: '100%', 
 
    height: '100%' 
 
    }, 
 
    text: { 
 
    style: { 
 
     // Text color. 
 
     // Default: same as stroke color (options.color) 
 
     color: '#999', 
 
     position: 'absolute', 
 
     right: '0', 
 
     top: '30px', 
 
     padding: 0, 
 
     margin: 0, 
 
     transform: null 
 
    }, 
 
    autoStyleContainer: false 
 
    }, 
 
    from: { 
 
    color: '#FFEA82' 
 
    }, 
 
    to: { 
 
    color: '#ED6A5A' 
 
    }, 
 
    step: (state, bar) => { 
 
    bar.setText(Math.round(bar.value() * 100) + ' %'); 
 
    } 
 
}); 
 

 
// Keep track of the current value 
 
var value = 0; 
 
setTimeout(function increment() { 
 
    value += 0.1; 
 
    bar.animate(value, function() { 
 
    // Animation has completed, queue up another step 
 
    if (value < 1) { 
 
     setTimeout(increment, 500); 
 
    } 
 
    }); 
 
}, 1000);

#container { 
 
    margin: 20px; 
 
    width: 400px; 
 
    height: 8px; 
 
    position: relative; 
 
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> 
 
<div id="container"></div>