ProgressBar.js – レスポンシブな美しい SVG プログレス バー

ProgressBar.js は、動的な SVG パスを使用した、美しく応答性の高いプログレス バー エフェクトです。 ProgressBar.js を使用すると、あらゆる形状のプログレス バーを簡単に作成できます。この JavaScript ライブラリには、線、円、四角形などの組み込みの図形がいくつか用意されていますが、Illustrator またはその他のベクター グラフィック エディタを使用して独自のプログレス バー効果を作成できます。

ラインプログレスバー:

var line = new ProgressBar.Line('#example-line-container', {
    color: '#FCB03C'
});
 
line.animate(1);

円形プログレスバー:

var circle = new ProgressBar.Circle('#example-circle-container', {
    color: '#FCB03C',
    strokeWidth: 2,
    fill: '#aaa'
});
 
circle.animate(1, function() {
    circle.animate(0);
})

カスタム形状とパス:

var container = document.getElementById('example-custom-container');
container.innerHTML = &#39;<object id="scene" type="image/svg+xml" data="images/moon-scene.svg"></object>&#39;;
 
var scene = document.getElementById(&#39;scene&#39;);
scene.addEventListener(&#39;load&#39;, function() {
    var path = new ProgressBar.Path(scene.contentDocument.querySelector(&#39;#asterism-path&#39;), {
        duration: 1000
    });
 
    path.animate(1, function() {
        path.animate(0);
    });
});

ProgressBar.js – 美しい応答性の高い SVG プログレスバー関連記事については、PHP 中国語 Web サイトに注目してください。 ！