表示百分比的动画圆圈 - jQuery jCirclize

表示百分比的动画圆圈 - jQuery jCirclize

版本:

浏览量:69

最后更新:2021-09-12

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

jCirclize 是一个小巧但可定制的 jQuery 百分比/进度表插件,它在画布元素上绘制一个动画圆/环来表示百分比数据。

也可以看看:

  • 10 个最佳圆形/径向进度条

如何使用它:

1. 将最新版本的 jQuery 库和 jCirclize 插件的文件导入到文档中。

<link href="css/jCirclize.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous"></script>
<script src="dist/jquery.jCirclize.js"></script>

2. 创建一个要放置画布的容器。

<div id="example">
</div>

3. 调用容器元素上的函数以生成默认百分比/进度表。

$(document).ready(function() {
  $('#example').circlize();
});

4. 自定义背景/填充颜色。

$(document).ready(function() {
  $('#example').circlize({
    background: "rgba(20,20,20,0.5)",
    foreground: "#1a1a1a"
  });
});

5. 自定义笔画宽度。

$(document).ready(function() {
  $('#example').circlize({
    stroke: 20
  });
});

6. 定义要表示的百分比数据。

$(document).ready(function() {
  $('#example').circlize({
    perc: 50,
    usePercentage: true
  });
});

7. 设置百分比/进度表的大小。

$(document).ready(function() {
  $('#example').circlize({
    radius: 100
  });
});

8. 自定义填充动画的持续时间。

$(document).ready(function() {
  $('#example').circlize({
    duration: 1000
  });
});

9. 自定义最小值/最大值。

$(document).ready(function() {
  $('#example').circlize({
    min: 100,
    max: 100
  });
});

变更日志:

2020-03-01

  • var更改let

2018-11-21

  • 固定代码风格

2018-11-19

  • 使用渐变作为前景。

2018-11-17

  • 固定代码样式和自述文件

  • 添加了库的香草版本

发表评论

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