多种数值显示方式的jQuery圆形进度条插件

多种数值显示方式的jQuery圆形进度条插件

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

圆形进度条

使用方法
在页面中引入下面的文件。

1
2
3
4
5
6
<!-- 纯 JavaScript -->
<script src="dist/circle-progress.min.js"></script>
 
<!-- jQuery插件 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/jquery.circle-progress.min.js"></script>

HTML结构

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

初始化插件

1
2
3
4
5
6
7
8
9
10
11
// Vanilla JavaScript
new CircleProgress('.progress', {
  max: 100,
  value: 50
});
 
// jQuery
$('.progress').circleProgress({
  max: 100,
  value: 50
});

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.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
1
2
3
new CircleProgress('.progress', {
    textFormat: 'horizontal'
});

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

1
2
3
4
5
6
7
new CircleProgress('.progress', {
  // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none
  animation: 'easeInOutCubic',
 
  // duration in milliseconds
  animationDuration: 600
});

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

1
2
3
4
5
6
7
new CircleProgress('.progress', {
  // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none
  animation: 'easeInOutCubic',
 
  // duration in milliseconds
  animationDuration: 600
});

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

1
2
3
new CircleProgress('.progress', {
  startAngle: 45
});

其它配置参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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, '?'
     
});
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论