将百分比/进度值显示为仪表 - 圆圈进度

版本:

浏览量:1213

最后更新：2021-09-11

应用标签：MAC 软件 git Jquery插件

推荐指数:

查看演示点击下载

详细信息

另一个圆形进度条插件，可在响应式、可定制、动画百分比/进度图中显示任何数值：圆形、环形图、饼图等。

也可以看看：

最佳圆形/径向进度条 JavaScript 插件

如何使用它：

1. 在文档中加载 Circle Progress 插件的脚本。要将 Circle Progress 用作 jQuery 插件，请确保加载jquery.circle-progress.min.js最新的 jQuery JavaScript 库。

<!-- Vanilla 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>

2. 创建一个空容器来保存百分比/进度圈。

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

3. 初始化插件并指定当前/最大值如下：

// Vanilla JavaScript
new CircleProgress('.progress', {
  max: 100,
  value: 50
});
 
// jQuery
$('.progress').circleProgress({
  max: 100,
  value: 50
});

4. 使用以下 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;
    ...
  */
}

5. 设置值的文本表示：

水平（默认）
垂直的
百分
价值
圆上的值
没有任何

new CircleProgress('.progress', {
    textFormat: 'horizontal'
});

6.自定义填充动画。

new CircleProgress('.progress', {
 
    // linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, or none
    animation: 'easeInOutCubic',
 
    // duration in milliseconds
    animationDuration: 600
     
});

7. 以度为单位设置起始角度。默认值：0。

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

8. 更多默认值的配置选项。

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