ClassyLoader是一款轻量级跨浏览器的jQuery圆形进度条插件。该圆形进度条基于HTML5 canvas来制作，使用简单，进度条的动画效果非常平滑。通过它你可以在你的网站上制作出非常漂亮的圆形进度条效果。它的特点还有：
- 圆形进度条的动画效果非常漂亮
- 跨浏览器
- 轻量级和高度可定制
- 使用简单
使用方法
使用该圆形进度条插件需要引入jQuery和jquery.classyloader.min.j文件。
<script src='js/jquery.min.js'></script>
<script src='js/jquery.classyloader.min.js'></script>
HTML结构
该圆形进度条基于<canvas>元素来制作，可以简单的通过一个空的<canvas>元素来实现。
<canvas class="loader"></canvas>
初始化插件
在页面DOM元素加载完毕之后，可以通过ClassyLoader()方法来初始化该圆形进度条。
$('.loader').ClassyLoader();
如果你需要手动触发圆形进度条，可以这样做：
var loader = $('.loader').ClassyLoader({
animate: false,
percentage: 0
});
上面的代码会将圆形进度条的进度显示为0%，但是不会发生动画。你可以通过设置需要的百分比数和draw()方法来使它产生动画效果
$('.customtrigger').on('click', function() {
loader.setPercent(100).draw();
});
或者使用下面的方法，两种方法是等效的：
$('.customtrigger').on('click', function() {
loader.draw(100);
});
配置参数
width：圆形进度条的宽度，单位像素，默认值200。height：圆形进度条的高度，单位像素，默认值200。animate：圆形进度条是否动画，默认值为true。percentage：圆形进度条的百分比值，0-100之间，默认值为100。speed：一次动画循环的时间，单位毫秒，默认值为1。showRemaining：是否显示剩余的百分比，默认值为true。start：开始的角度，默认值为left，可选值有：left，right，top和bottom。fontFamily：百分比数值的字体，默认值为Helvetica。showText：是否显示百分比数值文本，默认值为true。fontSize：百分比数值的字体尺寸，单位像素，默认值50px。roundedLine：是否使用圆角，单位像素，默认值false。diameter：圆形进度条的直径，单位像素，默认值80。fontColor：百分比文本的颜色，可以是任何CSS颜色，hex，rgb，rgba，hsl，hsla。默认值为rgba(25, 25, 25, 0.6)。lineColor：圆形进度条的线条颜色，默认值为rgba(55, 55, 55, 1)。remainingLineColor：剩余百分比的线条颜色（如果showRemaining为true）。默认值为rgba(55, 55, 55, 0.4)。lineWidth：圆形进度条的线条宽度，默认值为5。
方法
show()：初始化显示圆形进度条，但是不会动画。draw()：使进度条动画到指定的进度。setPercent()：设置圆形进度条的百分比值，你可以在它后面使用draw()方法使进度条动画起来。getPercent()：返回圆形进度条的百分比值。
