vue 最简单的环形进度条_progressBar
在做android开发的时候使用progressBar是比较方面的 ,因为官方提供了组件直接使用就可以。可vue官方并没有类似组件需要自己实现,百度、github看了一圈,发现实现一个简单的环形进度条做的都比较复杂,画挡板、画三个圈,一个底环、一个圆环、一个移动的环,太冗余,所以自己琢磨了一下分享出来,希望有所帮助。
思路:画一个圈进行旋转:
先看看效果:
export default {
name: "test",
mounted(){
let rotate =0
setInterval(() => {
if (rotate >= 100) {
rotate = 0;
}
rotate++;
let transform = "rotate(" + 3.6 * rotate + "deg)"
this.$data.clipStyle.transform= transform
}, 20);
},
data(){
return {
clipStyle:{
transform:"rotate(" + 3.6 * 0+ "deg)"
}
}
}
};
.box{
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.clip{
height: 100%;
box-sizing: border-box;
border-top: 10px solid lightblue;
border-left: 10px solid lightblue;
border-right: 10px solid #ccc;
border-bottom: 10px solid #ccc;
border-radius: 50%;
}
标签:
相关文章
-
无相关信息