<view class="circle-progress" style="box-shadow: inset 0 0 0 {{width}}rpx {{bgColor}}; width:{{size}}rpx ;height:{{size}}rpx" >
<view class="circle-progress-item circle-progress-item--l">
<view class="circle-progress-bar" style="transform:rotate({{progressBarLVal}}deg); width:{{size}}rpx ;height:{{size}}rpx">
<view class="huan" style="border-color:{{color}}; border-width:{{width}}rpx; "></view>
</view>
</view>
<view class="circle-progress-item circle-progress-item--r">
<view class="circle-progress-bar" style="transform:rotate({{progressBarRVal}}deg); width:{{size}}rpx ;height:{{size}}rpx">
<view class="huan" style="border-color:{{color}}; border-width:{{width}}rpx; "></view>
</view>
</view>
</view>
.circle-progress {
width: 200rpx;
height: 200rpx;
position: relative;
box-sizing: border-box;
box-shadow: inset 0 0 0 20rpx transparent;
border-radius: 50%;
display: flex;
}
.circle-progress-item {
width: 50%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.huan {
width: 50%;
height: 100%;
box-sizing: border-box;
border-radius: 100% 0 0 100%/50%;
border: 10px solid transparent;
border-right: none;
}
.circle-progress-item--r .huan {
position: absolute;
right: 0;
top: 0;
transform: rotate(180deg);
}
.circle-progress-bar {
width: 100%;
height: 100%;
}
.circle-progress-item--l .circle-progress-bar {
transition: all 0.2s ease-out 0.2s;
}
.circle-progress-item--r .circle-progress-bar {
position: relative;
left: -102%;
transition: all 0.2s ease-in;
}
Component({
options: {
multipleSlots: true
},
properties: {
progressPercent: {
type: Number,
value: 80,
},
bgColor: {
type: String,
value: '#F4F4F4'
},
color: {
type: String,
value: '#F1DE4A'
},
width: {
type: Number,
value: 10
},
size: {
type: Number,
value: 250
},
},
data: {
progressBarLVal: -180,
progressBarRVal: -180,
progressValLenght: 628,
},
methods: {
dopercent: function(percent) {
let progressValeR = percent;
let progressLastLenght = this.data.progressValLenght * (percent / 100);
let progressPercentAngle = (progressLastLenght * 360) / this.data.progressValLenght;
console.log(progressPercentAngle,progressLastLenght)
if(progressPercentAngle<180 || progressPercentAngle==180){
this.setData({
progressBarRVal:progressPercentAngle - 180,
progressBarLVal:-180
})
}else if(progressPercentAngle > 180){
let LastPercent = progressPercentAngle - 180;
console.log(LastPercent - 180)
this.setData({
progressBarRVal:0,
progressBarLVal:LastPercent - 180
})
}
},
reZero: function() {
this.dopercent(0)
},
doAnimation: function() {
this.dopercent(this.data.progressPercent)
},
},
pageLifetimes: {
show: function() {
this.dopercent(this.data.progressPercent)
},
}
})