原生JS环形进度条

原生JS环形进度条

这是我封装的一个基于canvas的环形进度条 目前只能一个canvas节点一个环形进度条

只需要 一个canvs节点 然后引入 封装好的 encapsulation_class.js文件

<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>
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 原生JS环形进度条

发表评论

提供最优质的资源集合

立即查看 了解详情