关于圆环进度条的问题

css

<style>
.circle {
width: 56px;
height: 56px;
position: relative;
border-radius: 50%;
background: #f2331d;
position: relative;
}

.pie_left,
.pie_right {
width: 56px;
height: 56px;
position: absolute;
top: 0;
left: 0;
}

.left,
.right {
width: 56px;
height: 56px;
background: #e6e9ed;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}

.pie_right,
.right {
clip: rect(0, auto, auto, 28px);
}

.pie_left,
.left {
clip: rect(0, 28px, auto, 0);
}

.mask {
width: 46px;
height: 46px;
border-radius: 50%;
left: 5px;
top: 5px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: bold;
color: #f2331d;
}
</style>

html

<div class="circle">
<div class="pie_left">
<div class="left"></div>
</div>
<div class="pie_right">
<div class="right"></div>
</div>
<div class="mask" id="mask">
<span class="mask_process">95</span> %
</div>
</div>

js

$(document).ready(function() {
$('.circle').each(function() {
var num = $(this).find('span').text() * 3.6;
if(num <= 180) {
 
$(this).find('.right').css('transform', "rotate(" + num + "deg)");
 
} else {
$(this).find('.right').css('transform', "rotate(180deg)");
 
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
 
};
});
});