利用旋转角度控制进度显示,当进度小于50%时 .half-progress 的背景色 与 .loop-progress 相同,达到遮盖进度的前半部分效果;
当进度大于50%时旋转 .half-progress并修改其背景色与进度条相同,达到补全进度效果
<html>
<style>
.loop-progress{
background-color: #6ED4BF;
width: 100px;
height: 100px;
border-radius: 50%;
position:relative;
}
.loop-progress .mask{
background-color:#1BBC9B;
width: 80px;
height: 80px;
border-radius:50%;
position:absolute;
left:10px;
top:10px;
}
.loop-progress .half-progress{