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 = '<object id="scene" type="image/svg+xml" data="images/moon-scene.svg"></object>';
var scene = document.getElementById('scene');
scene.addEventListener('load', function() {
var path = new ProgressBar.Path(scene.contentDocument.querySelector('#asterism-path'), {
duration: 1000
});
path.animate(1, function() {
path.animate(0);
});
});
您可能感興趣的相關文章
浙公網安備 33010602011771號