<div id="app" class="outer">
<div class="left"></div>
<div class=" right " :style="[rotateStyle, percent>50?{background:'greenyellow'}:null]"></div>
<div class="inner"></div>
<span>{{percent}}</span>
<div class="button" @click="test">前进</div>
</div>
.outer {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: greenyellow;
border-radius: 50%;
}
.left {
width: 200px;
height: 200px;
position: absolute;
margin: auto;
background: #eee;
border-radius: 50%;
clip: rect(auto, 100px, auto, auto);
}
.right {
width: 200px;
height: 200px;
position: absolute;
margin: auto;
background: #eee;
border-radius: 50%;
clip: rect(auto, auto, auto, 100px);
transition: transform 0.2s;
}
.inner {
width: 150px;
height: 150px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
background: #fff;
border-radius: 50%;
}
.button {
margin: 220px auto;
width: 50px;
height: 30px;
line-height: 30px;
background: #eee;
border: 1px solid gray;
text-align: center;
user-select: none;
}
new Vue({
el: '#app',
data() {
return {
percent: 0,
};
},
methods: {
test() {
this.percent = this.percent > 100 ? this.percent : (this.percent + 5) % 100;
},
},
computed: {
rotateStyle() {
var deg = (this.percent / 100) * 360;
return {
transform: `rotate(${deg > 180 ? deg - 180 : deg}deg)`,
};
},
},
});
关键点,利用clip属性构造两个半圆环,利用一个圆环的移动产生进度条效果