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

使用方法

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

<!-- 纯 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结构

<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, '?'
    
});

                

该多种数值显示方式的jQuery圆形进度条插件的github网址为：https://github.com/tigrr/circle-progress

在线预览    源码下载