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

　　

您可能感興趣的相關文章

• 網站開發中很有用的 jQuery 效果【附源碼】
• 分享35個讓人驚訝的 CSS3 動畫效果演示
• 十分驚艷的8個 HTML5 & JavaScript 特效
• Web 開發中很實用的10個效果【源碼下載】
• 12款經典的白富美型 jQuery 圖片輪播插件

?

本文鏈接：ProgressBar.js – 漂亮的響應式 SVG 進度條

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的ProgressBar.js – 漂亮的响应式 SVG 进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。