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

1. 效果图

2. 插件github地址

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

3. 问题

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

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

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

//引入jquery插件
//引入插件核心代码



  //重要
  //新增span标签（不一定必须是span，只是需要添加一个存文字的标签）
   

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

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

4. demo

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

                                                                   

     关键的代码：

5. 其余干货

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