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

PetitQ 其他代码 2019-7-19 1.61K 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 插件

已有 402 人购买

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

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

其他代码

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

使用方法

HTML 结构

初始化插件

API

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

相关文章

FontIconPicker -小巧jQuery字体图标选择器

所见即所得Markdown编辑器tui.editor

带重力感应的吊带式js滑块插件

发表回复取消回复

热销模板

其他代码

使用方法

HTML 结构

初始化插件

API

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复