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

推荐阅读：之前给大家分享过一款简单实用的纯CSS百分比圆形进度条插件 percircle，你不需要做任何设置，只需要按该圆形进度条插件提供的标准HTML结构来编写代码，就可以生成一个漂亮的百分比圆形进度条。

来源：jQuery之家