好资源导航 » 文章资讯 » 环形加载进度条封装（Vue插件版和原生js版）

环形加载进度条封装（Vue插件版和原生js版）

2023-08-05 01:37:04 89

本文实例为大家分享了环形加载进度条封装代码，供大家参考，具体内容如下

1、效果预览

2、用到的知识

主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。
在看下面文章之前，你需要了解




svgdemo

#line{
transition:all2s;
stroke-dasharray:300,320;
stroke-dashoffset:300;
}
svg:hover#line{
stroke-dashoffset:0;
}

#circle{
transition:all2s;
stroke-dasharray:314,314;
stroke-dashoffset:314;
}
svg:hover#circle{
stroke-dashoffset:0;
}




线段区域



圆区域

3、使用

有两种方式，一种是直接安装即可使用，一种需要封装。选一种适合自己的即可。

（1）、安装插件

安装Vue插件

npminstallloading-vue-component

使用

//main.js
importloadingfrom'loading-vue-component'
Vue.use(loading)

//app.vue

（2）、封装插件

Vue版






loading

原生js版






progress










varcircle=document.querySelector('circle');
varradius=circle.r.baseVal.value;
varcircumference=radius*2*Math.PI;

circle.style.strokeDasharray=`${circumference}${circumference}`;
circle.style.strokeDashoffset=`${circumference}`;

functionsetProgress(percent){
constoffset=circumference-percent/100*circumference;
circle.style.strokeDashoffset=offset;
}

constinput=document.querySelector('input');
setProgress(input.value);

input.addEventListener('change',function(e){
if(input.value<101&&input.value>-1){
setProgress(input.value);
}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

环形加载进度条封装（Vue插件版和原生js版）

线段区域

圆区域

热门推荐

随机推荐