转载

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之家

原文 http://www.html5cn.org/article-9335-1.html

正文到此结束

所属分类：编程技术

本文标签： git CSS 参数 ip UI 插件 jquery DOM 配置 HTML tar 时间下载代码 ACE js HTML5 http https GitHub src
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。