基于canvas的jQuery圆形进度条插件_jQuery之家-自由分享jQuery、html5、css3的插件库

ClassyLoader是一款轻量级跨浏览器的jQuery圆形进度条插件。该圆形进度条基于HTML5 canvas来制作，使用简单，进度条的动画效果非常平滑。通过它你可以在你的网站上制作出非常漂亮的圆形进度条效果。它的特点还有：

使用该圆形进度条插件需要引入jQuery和jquery.classyloader.min.j文件。

<script src='js/jquery.min.js'></script>
<script src='js/jquery.classyloader.min.js'></script>

该圆形进度条基于<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。