今天我們分享一個超酷的使用HTML5畫布技術開發的進度條插件 -?percentageloader。這個插件比普通的水平進度條使用更加炫酷的效果，圖形效果類似以前我們介紹的jQuery knob插件?，這個插件使用快捷簡單，可以非常好的應用到現代瀏覽器中。插件使用了HTML5的畫布來生成圖形界面，壓縮版本只有10kb大小，并且使用矢量Vector而非圖片來生成，可以很方便的生成不同大小的圖形。開源軟件，大家可以方便自由的使用。

主要特性

jQuery1.4+

支持瀏覽器：Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+

提供各種控制選項

使用簡單方便，壓縮文件非常小， 10kb

無損失的支持各種大小尺寸的圖形

如何使用

倒入相關類庫及其CSS：

插件js代碼：

$loader??=?$("#loader").percentageLoader({

width?:?400,

height?:?400,

progress?:?0

});

主要選項

progress：初始加載位置(0-1)

value：初始的label值

width：寬度

height：高度

controllable：允許用戶點擊設置值

onProgressUpdate(value)：提供了一個callback方法，允許使用更新的值來控制進度條

回調函數使用：

varloader;

loader?=?$("myDiv").percentageLoader({

controllable?:true,

onProgressUpdate?:function(value)?{

loader.setProgress(value?*?100.0);

}

});

是不是很簡單，希望大家能夠喜歡這個插件！

總結

以上是生活随笔為你收集整理的jq画布插件_超炫HTML 5开发的jQuery进度条插件的全部內容，希望文章能夠幫你解決所遇到的問題。

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