超给力的jQuery加载进度插件 - Percentage Loader

本文参考：http://site518.net/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);
}
});