HTML5 SVG的轻量级jQuery圆形进度条插件
jopen 9年前
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之家