【前端插件】渐变圆形进度条

最新推荐文章于 2024-05-06 09:42:44 发布

差不多先生img

最新推荐文章于 2024-05-06 09:42:44 发布

阅读量4.2k

点赞数

分类专栏： web前端文章标签：插件前端 web前端

本文链接：https://blog.csdn.net/u012088576/article/details/77887035

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 效果图

2. 插件github地址

https://github.com/kottenator/jquery-circle-progress

3. 问题

如何在圆形环状图中插入文字？

相信很多人照着官方示例画出了环状图，但是纠结如何在里面添加相应进度的文字。比如以上效果图中显示的第二个图，如何在里面添加“100%”呢？

首先假设你参考官方的usage在html中写了如下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>//引入jquery插件
<script src="jquery-circle-progress/dist/circle-progress.js"></script>//引入插件核心代码


<div id="circle">
  //重要
  //新增span标签（不一定必须是span，只是需要添加一个存文字的标签）
   <span></span>
</div>

<script>
 //创建环状元实例
  $('#circle').circleProgress({
    value: 0.75,
    size: 80,
    fill: {
      gradient: ["red", "orange"]
    }
  });
</script>

在代码中创建了<span>标签来存储文字后，下一步需要做的就是设置"#circle"和<span>的样式。具体样式的设置需要参考你想实现的效果，这里视情况而定。

最后一步所需就是为该圆形环状图设置监听事件，使文字可以随环状图进度加载的状态变化而改变。ps：圆形环状图详细的监听事件请查看github官方文档。

4. demo

最后放个小demo加深下大家的理解。效果图如下：

关键的代码：

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/circle-progress.js"></script>
    <style>
        #circle {
            position: relative;
            text-align: center;
            font-size: 13px;
        }
        #circle span {
            position: absolute;
            top: 15px;
            left: 0;
            width: 100%;
            text-align: center;
            line-height: 13px;
        }
    </style>
</head>
<body>
    <div id="circle">
        <span></span>
    </div>
    <script type="text/javascript">
        $("#circle").circleProgress({
            value: 0.75,
            size: 45,
            startAngle: -Math.PI / 2,
            thickness: '5.5',
            fill: {
                gradient: ["orange", "red"]
            }
        }).on('circle-animation-progress', function (event, progress, stepValue) {
            $(this).find('span').html(stepValue.toFixed(2) * 100 + '%');
        });
    </script>
</body>
</html>