canvas圆形进度条插件

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

 35687  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圆半径
});
相关插件-加载,圆边

jquery 实现流程进度显示

基于jQuery实现的流程进度显示,可应用于网络订单状态查看,用户注册状态查看等
  加载
 71991  591

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 41689  381

jquery实现图片预加载

jquery实现图片预加载
  加载
 50131  446

jquery.Loading

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

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复