canvas圆形进度条插件

所属分类:UI-加载,圆边

 6297  32  查看评论 (8)
canvas圆形进度条插件 ie兼容10

使用方法

1.引入js插件progress.js

2.在html中创建canvas、设置宽高、建议为正方形

3.声明

var cvs = new Progress({
    el: 'ID值', //canvas元素id   
    deg: 30, //number、绘制角度、建议0~100  
    timer: 10, //number、绘制时间   
    lineWidth: 20, //number、线宽   
    lineBgColor: '#e2e2e2', //合法的颜色单位,底圆颜色、如:#ccc、rgb()、rgba()   
    lineColor: '#e4393c', //动态圆颜色  
    textColor: '#cff', //文本颜色   
    fontSize: 50, //number字体大小    
    circleRadius: 100 //number圆半径
});
相关插件-加载,圆边

jquery播放进度条插件,可拖动

jquery插件播放进度条,可以拖动,可以控制,可设置时间
  加载
 14859  49

jquery实现图片预加载

jquery实现图片预加载
  加载
 18687  138

jQuery进度条插件jqbar

柱状图动态显示工具
  加载
 16577  66

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 16491  81

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币

    JINX 0
    2018/5/25 11:17:28
    请问怎么把圆的边框变成圆形呢 回复
    冷色调 0
    2018/1/24 14:23:49
    在手机浏览器里不能用 回复
    空白答案上的对白?? 0
    2017/12/25 10:09:25

    时间不能设置为0~

    回复
    让梦想起飞O(∩_∩)O 0
    2017/12/21 19:51:33

    能加载动态数据吗?

        Ape1
        2018/1/15 23:28:46

        可以的

        var p1 = new Progress({
            el: 'my_html', //canvas元素id
            deg: 30, //填入你的数据 如data
            timer: 10, //绘制时间
            lineWidth: 20, //线宽
            lineBgColor: '#e2e2e2', //底圆颜色
            lineColor: '#e4393c', //动态圆颜色
            textColor: '#000', //文本颜色
            fontSize: 50, //字体大小
            circleRadius: 100 //圆半径
        });

        通过获取数据 获取成功之后在调用这段话 把deg改为获取到的动态数据

        青蛙0
        2018/3/26 14:54:27
        这样就会重现画,能不能接着上一次的画
    回复
    程某某 0
    2017/10/24 17:13:07
    im'77 0
    2017/10/12 11:36:06
取消回复