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

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

版本:

浏览量:84

最后更新:2021-09-11

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

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

更多功能:

  • 通过 JavaScript 和 CSS 完全可定制。

  • 基于 SVG 的矢量形状。

  • 顺时针或逆时针旋转。

  • 带有缓动功能的花式填充动画。

  • 6 种数值显示模式。

  • 也可以用作 Vanilla JavaScript 插件。

也可以看看:

  • 最佳圆形/径向进度条 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, '?'
     
});

变更日志:

v0.2.0 (2020-08-23)

  • 添加 UMD 支持

v0.1.2 (2020-05-02)

  • 替换 SVG innerHTML polyfill

v0.1.1 (2020-04-27)

  • 扩展动画功能

v0.1.0 (2019-10-05)

  • 将 CSS 类添加到 SVG 元素

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。