原生JS环形进度条 (原创)

所属分类:UI-加载

 18436  189  查看评论 (3)
分享到微信朋友圈
X
原生JS环形进度条 (原创) ie兼容12

更新时间:2020-02-25 23:26:27

<canvas id="le-canvas"></canvas>
<script>
    /**
     * 此插件为原创,目前只能一个canvas内一个环形进度条
     * 后面会最加更新至一个canvas内可嵌多个环形进度条
     * 内部代码都是原生JS 所以可以在vue框架使用 也可以套入其他框架
     */
    var canvas_1 = new EnableCircle({
            id: 'le-canvas', // 节点标签 [必填] id选择器
            value: 80, // 百分比值 [必填] 
            bgColor: '', // 背景颜色 十六进制 [可填] 默认为透明;  当填了type的vba_color 或target的 可不填
            cirColor: '#e54d42', // 进度条颜色 十六进制 [必填] 当填了type的vba_color 或target的 可不填
            textColor: '#f37b1d', // 字体颜色 十六进制 [必填] 当填了type的vba_color 或target的 可不填
            type: 'shadow', // 样式 [可填] 默认:none 样式可选: shadow (添加阴影);vba_color(优先级最高特殊样式) none (无)
            lineCap: 'butt', // 进度条末端类型 [可填] 默认:butt (平滑);round (圆形线帽) 
            target: 'default', // 进度条指定类型 [可填] 默认: default 
            size: 60, // 环形半径 [可填] 默认: 40
            lineWidth: 14, // 进度条宽度 [可填] 默认: 8 最高60
            open: 'between' // 进度条开始点 [可填] 默认: top 可选 bottom 、top 、between
        }) 
</scrtipt>
相关插件-加载

jquery图片加载进度

图片异步加载进度表条
  加载
 53592  385

HTML5实现的网页进度条

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

精美进度条

色彩绚丽的进度条,代码简单,动画感强
  加载
 41179  390

圆形进度按钮

执行按钮提交创建圆形进度加载提示
  加载
 38038  470

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

    宠你一身脾气 0
    2020/8/28 10:11:57
    这种只能显示10%的不标注下
        Yuni_家乐仔0
        2021/7/16 13:26:38
        嘿呀,太久没回来JQ2了,都忘了有这个,😵都忘了自己之前咋敲的了
        Simonkes丶阿不从0
        2023/7/27 14:48:35
        只能显示10%?20%也可以显示呀😥
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复