[转]jQuery加载进度插件 - Percentage Loader

转自 给力技术 超给力的jQuery加载进度插件 - Percentage Loader

　　 Percentage Loader 是一个基于 jQuery 开发的加载进度(百分比显示)插件，它有着非常吸引人眼球的外观，也非常易于使用。它也用到了目前很热门的 HTML5 canvas 技术，只要是支持 HTML5 的浏览器都能运行此插件。如果你正好在寻找这样的插件，那么 Percentage Loader 会是一个相当不错的选择。
如何使用

　　首先引入  jQuery 框架和 Percentage Loader 插件的相关文件

<script src="jquery.min.js"></script>
<script src="jquery.percentageloader.min.js"></script>
<link rel="stylesheet" href="jquery.percentageloader.css"/>

　　然后在 HTML 页面的 body 中放置如下代码，用于展现加载进度

<div id="topLoader"></div>

　　之后就可以对它进行初始化了，可以使用 .setProgress() 和 .setValue() 来更新它的值，再借助 onProgressUpdate 这个回调方法就可以实现进度加载的动态效果

var $loader = $("#topLoader").percentageLoader({
width: 256,
height: 256,
controllable: true,
progress: 0.5,
onProgressUpdate: function (val) {
$loader.setValue(val * 100.0);
}
});

    查看演示