当前位置：首页 > 网页特效 > 进度条

基于HTML5 SVG的jQuery圆形进度条动画特效

分类：进度条日期：2024-05-14 点击(0) 评论(0)

简介

使用该圆形进度条插件先要引入jQuery和jquery-asPieProgress.js以及progress.css文件。

```html
<link rel="stylesheet" href="css/progress.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="src/jquery-asPieProgress.js"></script>   
```             
####  HTML结构
该圆形进度条的基本HTML结构如下：

```html
<div class="pieProgress" role="progressbar" data-goal="100" aria-valuemin="0" data-step="2" aria-valuemax="100">
    <div class="progress__meter"><span class="progress__label"></span></div>
</div>
```
你可以直接在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   
```

web299.com

基于HTML5 SVG的jQuery圆形进度条动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果