在線演示  本地下載 

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

主要特性

jQuery1.4+

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

提供各種控制選項

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

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

如何使用

倒入相關類庫及其CSS：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquery.percentageloader-0.1.min.js"></script>  
<link rel="stylesheet" type="text/css" href="css/jquery.percentageloader-0.1.css" />  
 
插件js代碼：   
 
$loader  = $("#loader").percentageLoader({  
    width : 400,   
    height : 400,   
    progress : 0  
}); 

主要選項

progress：初始加載位置（0-1）

value：初始的label值

width：寬度

height：高度

controllable：允許用戶點擊設置值

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

回調函數使用：

var loader;  
loader = $("myDiv").percentageLoader({  
    controllable : true,  
    onProgressUpdate : function (value) {  
        loader.setProgress(value * 100.0);  
    }  
}); 

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