</div>
<div class="left up">
<div class="circleProgress leftcircle js_progressLeft" style="-webkit-transform:rotate('+circleData.leftRotate.toString()+'deg)"></div>
</div>
//percent小于50时需要使用遮罩进行遮挡超出环形范围部分
<div class="left up_left_cover js_giftLeftCover" style="display:'+circleData.leftCircleDisplay+'">
<div class="circleProgress leftcircle color_border_t_l04"></div>
</div>
<div class="num">
<div>剩余</div>
<div class="js_giftPercent">'+circleData.percent+'%</div>
</div>
</div>
css代码：
.progress_wrap{
position: relative;
margin:0 0 0 .14rem;
width:.92rem;height:.92rem;
//little和more用来展示黄色和绿色的效果
&.little{
.under{
.rightcircle,.leftcircle{
border-top:$progress_border_under_little;
}
.rightcircle{
border-right:$progress_border_under_little;
}
.leftcircle{
border-left:$progress_border_under_little;
}
}
.up{
.rightcircle,.leftcircle{
border-top:$progress_border_up_little;
}
.rightcircle{
border-right:$progress_border_up_little;
}
.leftcircle{
border-left:$progress_border_up_little;
}
}
//用遮挡实现左侧剩余百分比，遮住超出环形范围部分；核心是使用同心圆进行边框进行遮挡
.up_left_cover{
width:.47rem;height:.92rem;
.leftcircle{
top:-.02rem;
width:.74rem;height:.74rem;
border:.11rem solid transparent;
border-top:$progress_border_up_left_cover_little;
border-left:$progress_border_up_left_cover_little;
//实际值为195deg,被遮挡环颜色值深有光晕,需要将角度进行微调（-191deg）进行完全遮挡
-webkit-transform:rotate(-191deg);
}
}
}
&.more{
.under{
.rightcircle,.leftcircle{
border-top:$progress_border_under;
}
.rightcircle{
border-right:$progress_border_under;
}
.leftcircle{
border-left:$progress_border_under;
}
}
.up{
.rightcircle,.leftcircle{
border-top:$progress_border_up;
}
.rightcircle{
border-right:$progress_border_up;
}
.leftcircle{
border-left:$progress_border_up;
}
}
}
.right,.left{
position: absolute;top:0;overflow:hidden;
width:.46rem;height:.92rem;
.circleProgress{
position: absolute; top:0;
width: .78rem; height: .78rem;
border:.07rem solid transparent; border-radius: 50%;
}
.rightcircle{
right:0;
-webkit-transform: rotate(15deg);
}
.leftcircle{
left:0;
-webkit-transform: rotate(-15deg);
}
}
.right{
right:0;
}
.left{
left:0;
}
.num{
position: absolute;left:50%;top:50%;
