在做android开发的时候使用progressBar是比较方面的 ，因为官方提供了组件直接使用就可以。可vue官方并没有类似组件需要自己实现，百度、github看了一圈，发现实现一个简单的环形进度条做的都比较复杂，画挡板、画三个圈，一个底环、一个圆环、一个移动的环，太冗余，所以自己琢磨了一下分享出来，希望有所帮助。
思路：画一个圈进行旋转：
先看看效果：
<template>
<div class= "box" >
<div class= "clip" :style= "clipStyle"></div>
</div>
</template>
<script>
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)"
}
}
}
};
</script>
<style scoped>
.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%;
}
</style>