首頁 > web前端 > js教程 > ProgressBar.js – 漂亮的響應式 SVG 進度條

ProgressBar.js – 漂亮的響應式 SVG 進度條

高洛峰
發布: 2016-12-16 16:35:35
原創
1740 人瀏覽過

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);
    });
});
登入後複製



rrreee

🎜🎜🎜🎜.D.LProgressBar.jsPProgressBar.jsP中文網! 🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板