canvas圆形进度条插件

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

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顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 7504  52

菊花加载

超好用的菊花加载效果,可用于手机端
  加载
 29864  96

带刻度的进度条

html5 CSS3渐变进度条动画效果
  加载
 10154  19

8种fakeloader页面加载效果代码

8种fakeloader页面加载效果代码,支持7种效果和自定义图片,兼容主流浏览器,推荐下载!
  加载
 27700  213

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

    ganjubing 0
    2018/7/3 0:32:01
    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
        2018/6/26 15:49:45
        设置定时器之后画布的宽高越来越大
    回复
    程某某 0
    2017/10/24 17:13:07
    im'77 0
    2017/10/12 11:36:06
取消回复