css+js实现环形进度条

<div class="wrap">
　　<div class="leftWrap">
    	<div class="left"></div>
    </div>
    <div class="rightWrap">
    	<div class="right"></div>
    </div>
    <div class="proportion">60%</div>
</div>

　　

.wrap{width:110px;height:110px;position:relative;border-radius:50%;background:green;}
.leftWrap{width:55px;height:110px;position:absolute;left:0;top:0;overflow:hidden;}
.rightWrap{width:55px;height:110px;position:absolute;right:0;top:0;overflow:hidden;}
.left{width:55px;height:110px;border-radius:55px 0 0 55px;background:gray;transform-origin:right center;}
.right{width:55px;height:110px;border-radius:0 55px 55px 0;background:gray;transform-origin:left center;}
.proportion{width:96px;height:96px;line-height:96px;position:absolute;top:7px;left:7px;background:#fff;border-radius:50%;text-align:center;font-size:20px;}

　　

var num = parseInt($(".proportion").html())*3.6;
if(num<180){
　　$(".left").css("transform","rotate(" + num + "deg)");	
}else{
　　$(".left").css("transform","rotate(180deg)");	
　　$(".right").css("transform","rotate(" + (num-180) + "deg)");
}
	    

　　

转载于:https://www.cnblogs.com/snowRock/p/5587273.html