canvas圆形进度条插件

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

 34588  332  查看评论 (13)
分享到微信朋友圈
X
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圆半径
});
相关插件-加载,圆边
  加载
 36256  365

3D立体环形进度图表

3D立体环形进度图表,只要传入0100的整数,就能显示对应的百分比,大小自适应。
  加载
 32201  327

创造性的负载效应

13种页面加载特效
  加载
 23553  343

带刻度的进度条

html5 CSS3渐变进度条动画效果
  加载
 32840  312

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Sunny 0
    2020/9/29 14:40:24
    请问如何停止这个动画啊?我多次点击执行的时候,总是要重复闪烁了 回复
    Sarahq 0
    2018/8/15 12:48:22
    请问怎么设置圆形进度条的位置
        西瓜0
        2018/8/15 13:45:08
        deg: 30, //number、绘制角度、建议0~100
    回复
    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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复