web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
进度条
HTML5 SVG的轻量级jQuery圆形进度条插件
分类：
进度条
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该侧边栏菜单插件需要引入jQuery、jquery-pie-loader.js以及jquery-pie-loader.css文件。 ```html <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等元素作为圆形进度条的容器。 ```html <figure id="my-item" class="svg-pie"></figure> ``` ##### 初始化插件 在页面DOM元素加载完毕之后，可以通过svgPie()方法来初始化该隐藏侧边栏插件。 ```html $('#my-item').svgPie( options ) ``` ##### 配置参数 该圆形进度条插件有以下一些配置参数： easing (string)：可选参数，设置动画的easing效果，默认值为easeOutCubic。 ```html easing: 'swing' ``` duration (number)：可选参数，动画的持续时间，默认值为2000毫秒。 ```html duration: 2000 ``` dimension (number)：圆形的直径，单位像素，默认值为200像素。 ```html dimension: 300 ``` percentage (number)：最终的圆形进度条百分比值。 ```html percentage: 42 ``` onStart (function)：动画开始后的回调函数。 ```html onStart: function(){ alert('The animation started') } ``` onComplete (function)：动画结束后的回调函数。 ```html onComplete: function(){ alert('The animation is over') } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
