多种数值圆形进度条jQuery插件

PetitQ 其他代码 2019-7-19 1.82K 0 0

这是一款多种数值显示方式的 jQuery 圆形进度条插件。该圆形进度条可以作为 jquery 插件，也可以作为纯 js 插件来使用。它基于 SVG，内置了多种漂亮的数值和外观显示方式。

使用方法

在页面中引入下面的文件。

也想出现在这里？联系我们吧

```

```

<script src="dist/circle-progress.min.js"></script>

```
 
```
```

```

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="dist/jquery.circle-progress.min.js"></script>

HTML 结构

```
<div class="progress"></div>
```

初始化插件

```
// Vanilla JavaScript
```
```
new CircleProgress('.progress', {
```
```
  max: 100,
```
```
  value: 50
```
```
});
```
```
 
```
```
// jQuery
```
```
$('.progress').circleProgress({
```
```
  max: 100,
```
```
  value: 50
```
```
});
```
```
CSS样式
```
```
.circle-progress-svg {
```
```
  /* 
```
```
    width: 200px; 
```
```
    height: auto;
```
```
    ...
```
```
   */
```
```
}
```
```
 
```
```
.circle-progress-circle {
```
```
  /* 
```
```
    stroke-width: 6px;
```
```
    stroke: hsl(39, 100%, 85%);
```
```
    ...
```
```
   */
```
```
}
```
```
 
```
```
.circle-progress-value {
```
```
  /* 
```
```
    stroke-width: 6px;
```
```
    stroke: hsl(39, 100%, 50%);
```
```
    ...
```
```
  */
```
```
}
```
```
 
```
```
.circle-progress-text {
```
```
  /* 
```
```
    fill: hsl(39, 100%, 50%);
```
```
    ...
```
```
  */
```
```
}
```
```
 
```
```
.circle-progress-text-value {
```
```
  /* 
```
```
    fill: red;
```
```
    ...
```
```
  */
```
```
}
```
```
 
```
```
.circle-progress-text-max {
```
```
  /* 
```
```
    fill: red;
```
```
    ...
```
```
  */
```
```
}
```

API

设置圆形进度条的数值：

```
    horizontal (horizontal)
```
```
    vertical
```
```
    percent
```
```
    value
```
```
    valueOnCircle
```
```
    none
```
```
 
```
```
new CircleProgress('.progress', {
```
```
    textFormat: 'horizontal'
```
```
});
```

自定义圆形进度条的填充动画。

```
new CircleProgress('.progress', {
```

  // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none

```
  animation: 'easeInOutCubic',
```
```
 
```
```
  // duration in milliseconds
```
```
  animationDuration: 600
```
```
});
```

自定义圆形进度条的填充动画。

```
new CircleProgress('.progress', {
```

  // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none

```
  animation: 'easeInOutCubic',
```
```
 
```
```
  // duration in milliseconds
```
```
  animationDuration: 600
```
```
});
```

设置圆形进度条的开始角度。

```
new CircleProgress('.progress', {
```
```
  startAngle: 45
```
```
});
```

其它配置参数

```
new CircleProgress('.progress', {
```
```
    // min value
```
```
    min: 0,
```
```
 
```
```
    // false = anti-clockwise
```
```
    clockwise: true,
```
```
 
```

    // whether the value should be constrained between min and max

```
    constrain: true,
```
```
 
```
```
    // indeterminate text
```
```
    indeterminateText, '?'
```
```
 
```
```
});
```

Github 网址：https://github.com/tigrr/circle-progress

多种数值圆形进度条 jQuery 插件

已有 454 人购买

永久更新：
演示数据：
提取码：kqo3

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

多种数值圆形进度条jQuery插件

使用方法

HTML 结构

初始化插件

API

多种数值圆形进度条 jQuery 插件

相关文章

HTML编码解码JavaScript工具类

多个元素CSS3过渡效果插件

CSS3彩色进度条动画特效

发表回复取消回复

热销模板

其他代码

使用方法

HTML 结构

初始化插件

API

多种数值圆形进度条 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复