HTML5 SVG的轻量级jQuery圆形进度条插件

jquery-pie-loader.js是一款轻量级的基于HTML5 SVG的jQuery圆形进度条插件。通过该插件可以在页面中渲染出带动画效果的SVG饼状图形，适合用于制作进度显示，加载进度等效果。

使用方法

使用该侧边栏菜单插件需要引入jQuery、jquery-pie-loader.js以及jquery-pie-loader.css文件。

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

HTML结构

可以使用div或figure等元素作为圆形进度条的容器。

<figure id="my-item" class="svg-pie"></figure>
  

初始化插件

在页面DOM元素加载完毕之后，可以通过svgPie()方法来初始化该隐藏侧边栏插件。

$('#my-item').svgPie( options )   
  

配置参数

该圆形进度条插件有以下一些配置参数：

• easing (string)：可选参数，设置动画的easing效果，默认值为easeOutCubic。

  easing: 'swing'
  

• duration (number)：可选参数，动画的持续时间，默认值为2000毫秒。

  duration: 2000
  

• dimension (number)：圆形的直径，单位像素，默认值为200像素。

  dimension: 300
  

• percentage (number)：最终的圆形进度条百分比值。

  percentage: 42
  

• onStart (function)：动画开始后的回调函数。

  onStart: function(){
      alert('The animation started')
  }
  

• onComplete (function)：动画结束后的回调函数。

  onComplete: function(){
      alert('The animation is over')
  }
  

jquery-pie-loader.js插件的github地址为：https://github.com/acezard/jquery-pie-loader