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

来源：互联网发布：淘宝卖家账户被监管编辑：程序博客网时间：2024/05/21 17:13

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>

5. 其余干货

详解用CSS3制作圆形滚动进度条动画效果
jquery-circle-progress插件中文文档翻译

阅读全文

0 0