web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
进度条
基于HTML5 SVG的jQuery圆形进度条动画特效
分类:
进度条
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该圆形进度条插件先要引入jQuery和jquery-asPieProgress.js以及progress.css文件。 ```html
``` #### HTML结构 该圆形进度条的基本HTML结构如下: ```html
``` 你可以直接在HTML中通过HTML5 data-*属性来为圆形进度条传递参数,也可以在初始化时通过js来传递参数。 #### 初始化插件 在页面加载完毕之后可以通过下面的方法来初始化该圆形进度条。 ```html $(".progress").asPieProgress({ namespace: 'pieProgress' }); ``` #### 配置参数 ------------ 下面是一些可用的配置参数。 ```html { namespace: 'asPieProgress',//名称空间 min: 0, //最小值 max: 100, //最大值 goal: 100, //总数 step: 1, //步长 speed: 50, // refresh speed delay: 300, //延迟 easing: 'ease',//easing效果 label: function(n) { //显示的文字 var percentage = this.getPercentage(n); return percentage; }, onStart: function(){}, onStop: function(){}, onUpdate: function(){}, onReset: function(){} } ``` #### 方法 ------------ 该圆形进度条插件提供了一些可用的公共方法: ```html $(".progress").asPieProgress("start"); $(".progress").asPieProgress("stop"); $(".progress").asPieProgress("done"); $(".progress").asPieProgress("go", 50); $(".progress").asPieProgress("go", '50%'); $(".progress").asPieProgress("reset"); ``` #### 事件 ------------ ```html asPieProgress::start asPieProgress::stop asPieProgress::done asPieProgress::update asPieProgress::reset ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告