ProgressBar.js 是一個(gè)借助動(dòng)態(tài) SVG 路徑的漂亮的，響應(yīng)式的進(jìn)度條效果。使用?ProgressBar.js 可以很容易地創(chuàng)建任意形狀的進(jìn)度條。這個(gè) JavaScript 庫提供線條，圓形和方形等幾個(gè)內(nèi)置的形狀，但你可使用?Illustrator 或任何其它的矢量圖形編輯器創(chuàng)建自己的進(jìn)度條效果。

?

?

在線演示? ? ??插件下載

?

線條進(jìn)度條：

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

圓形進(jìn)度條：

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

　　

您可能感興趣的相關(guān)文章

• 網(wǎng)站開發(fā)中很有用的 jQuery 效果【附源碼】
• 分享35個(gè)讓人驚訝的 CSS3 動(dòng)畫效果演示
• 十分驚艷的8個(gè) HTML5 & JavaScript 特效
• Web 開發(fā)中很實(shí)用的10個(gè)效果【源碼下載】
• 12款經(jīng)典的白富美型 jQuery 圖片輪播插件

?

本文鏈接：ProgressBar.js – 漂亮的響應(yīng)式 SVG 進(jìn)度條

編譯來源：夢(mèng)想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計(jì)資源

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。