今天我们分享一个超酷的使用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
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
主要选项
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);
}
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
是不是很简单，希望大家能够喜欢这个插件！
原文链接：http://www.cnblogs.com/gbin1/archive/2012/06/20/2555974.html
