圆形进度条

<input type="number" id="edit" max="100" placeholder="请输入百分比，注需要小于100"/> 
<button id="sub">sub</button>
  <div class='cont'>
    <div class='left'> 
      <div class='leftcont' id="leftcont"></div>
    </div>
    <div class='right'>
      <div class="rightcont" id="rightcont"></div>
    </div> 
    <div class='middle' id="middle">0%</div>
  </div>

*{margin: 0;padding: 0;}
.cont{width: 130px;height: 130px;background: linear-gradient(#6b77f9, #7465f7);overflow: hidden;position: relative;border-radius: 130px;margin: 40px auto 22px;}
.left{width: 65px;height: 130px;position: relative;float: left;overflow: hidden}
.leftcont{width: 65px;height: 130px;background: #f5f5f5;position: absolute;top: 0;left: 0;border-radius:  130px 0 0 130px;transform: rotateZ(0deg);transform-origin: right center;line-height: 130px;}
.right{width: 65px;height: 130px;position: relative;overflow: hidden;float: right;}
.rightcont{width: 65px;height: 130px;background: #f5f5f5;position: absolute;top: 0;right: 0;border-radius: 0 130px 130px 0;line-height: 130px;transform-origin: left center;}
.middle{width: 114px;height: 114px;background: #fff;border-radius: 116px;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;z-index: 5;line-height: 114px;text-align: center;font-size: 28px;color: #4c62ff;font-weight: bold;}

function $(id){return document.getElementById(id)}
var num = 0,ratioHalf = 50,angleHalf = 180,i=0,timer,time;
$("sub").onclick= function(){
	num = $("edit").value
	console.log(num)
		if(num <= 100){
		if(num-1 < ratioHalf){
			$("rightcont").style.transform  = "rotateZ("+num*angleHalf/ratioHalf+"deg)";
			$("rightcont").style.transition = "1s linear";
			time = 1000/num;
		}
		if(num > ratioHalf){
			$("rightcont").style.transform  = "rotateZ("+angleHalf+"deg)";
			$("rightcont").style.transition = "1s linear";
			$("leftcont").style.transform  = "rotateZ("+(num-ratioHalf)*(angleHalf/ratioHalf)+"deg)";
			$("leftcont").style.transition = 3.6/angleHalf*(num-ratioHalf)+"s linear 1s";
			time = (1000+3.6/angleHalf*(num-ratioHalf)*1000)/num;
		}
		timer = setInterval(function(){
			i++;
			$("middle").innerHTML = i+'%'
			if(i == num){
				i= 0;
				clearInterval(timer);
			}
		},time)
	}else{
		alert('百分比大于100，你让我怎么转')
		return false
	}
}