基于HTML5 SVG的jQuery圆形进度条动画特效

asPieProgress是一款基于HTML5 SVG的jQuery圆形进度条动画特效插件。这个圆形进度条在在初始化的时候使用jQuery来添加SVG代码，然后可以在SVG上执行进度条动画效果。它还可以用于制作倒计数效果。

使用方法

使用该圆形进度条插件先要引入jQuery和jquery-asPieProgress.js以及progress.css文件。

<link rel="stylesheet" href="css/progress.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="src/jquery-asPieProgress.js"></script>                
              

HTML结构

该圆形进度条的基本HTML结构如下：

<div class="pieProgress" role="progressbar" data-goal="100" aria-valuemin="0" data-step="2" aria-valuemax="100">
    <div class="progress__meter"><span class="progress__label"></span></div>
</div>
              

你可以直接在HTML中通过HTML5 data-*属性来为圆形进度条传递参数，也可以在初始化时通过js来传递参数。

初始化插件

在页面加载完毕之后可以通过下面的方法来初始化该圆形进度条。

$(".progress").asPieProgress({
    namespace: 'pieProgress'
});               
              

配置参数

下面是一些可用的配置参数。

{
    namespace: 'asPieProgress',//名称空间
    min: 0,     //最小值
    max: 100,   //最大值
    goal: 100,  //总数
    step: 1,    //步长
    speed: 50, // refresh speed
    delay: 300, //延迟
    easing: 'ease',//easing效果
    label: function(n) {    //显示的文字
        var percentage = this.getPercentage(n);
        return percentage;
    },
    onStart: function(){},
    onStop: function(){},
    onUpdate: function(){},
    onReset: function(){}
}                
              

方法

该圆形进度条插件提供了一些可用的公共方法：

$(".progress").asPieProgress("start");
$(".progress").asPieProgress("stop");
$(".progress").asPieProgress("done");
$(".progress").asPieProgress("go", 50);
$(".progress").asPieProgress("go", '50%');
$(".progress").asPieProgress("reset");                
              

事件

asPieProgress::start
asPieProgress::stop
asPieProgress::done
asPieProgress::update
asPieProgress::reset