JS环形进度条 渐变色

html部分

<div class="jixulvcontent">
    <div class="jixulvmainball">
    	<span class="jixulvpertext">70%</span>
    	<div id ="target" class="jixulvzhizhen"></div>
      <div>
      	<ul class="jixulvitemwrap">
      </ul>
      </div>
    </div>
  </div>

css部分

.jixulvcontent{
  margin-top: 100px;
}
.jixulvmainball {
  margin: 70px auto;
/*   background: #0AF135; */
  width: 150px;
  height: 150px;
  border-radius: 50%;
  line-height: 150px;
  text-align: center;
  position: relative;
  font-size: 80px;
  color: #fff;
}
.jixulvpertext{
  position:absolute;
  top:65%;
  left:33%;
  z-index: 9;
  font-size:40px;
}
.jixulvitemwrap {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  top: -150px;
  left: -158px;
  border: 235px solid rgba(190, 20, 20, 0);
  border-radius: 50%;
  transform: rotate(240deg);
  z-index: 3;
}


.jixulvitemwrap li {
  position: absolute;
  top: -100px;
  left: -4px;
  transform-origin: 4px 100px;
  transition: all .3s .5s;
}

.jixulvitem {
  width: 10px;
  height: 10px;
  background: #4e6a4f;
}
.jixulvzhizhen{
	position: absolute;
    z-index: 9;
    left: 6%;
    top: 33%;
    width: 80px;
    height:80px;
/* 	transform:rotate(100deg); */
/* 	-ms-transform:rotate(100deg);  */
/* 	-moz-transform:rotate(100deg);  */
/* 	-webkit-transform:rotate(100deg); */
/* 	-o-transform:rotate(100deg);  */
	transform-origin : 87% 50% 0;
  background:url('img/todo/1.png') no-repeat;
  background-size:cover;
}
.jixulvzhizhen img{
	width:100%;
	height:100%;
}

中间指针部分主要调试指针旋转的圆心位置
transform-origin : X Y 0;

js部分

           var current = 0;
           var turnRight = function (pers){
        	current = pers*2.4-30;
//   			current = (current)%360;
   			document.getElementById('target').style.transform = 'rotate('+current+'deg)';
   		}
           function render(pers){
        	   turnRight(pers);
        	   var fragment = document.createDocumentFragment();

        	   var itemnum = 72
        	   var deg = 360 / itemnum

        	   var r=58
        	   var g=255
        	   var b=2

        	   var per = pers /100

        	   var text = document.querySelector('.jixulvpertext')
        	   text.innerText=per*100 + '%'

        	   for(var i=0;i<itemnum;i++){
        	     var item = document.createElement('div')
        	     item.className = "jixulvitem"
        	     if(per != 0 && i <= itemnum * per * 2/3 ){
        	       var bgcolor = 'rgb('+ (r+4*i)+','+(g-5*i)+','+b+')'
        	       item.style.background = bgcolor
        	     }
        	   
        	     var li = document.createElement('li')
        	     var curdeg = deg * i
        	     if(curdeg<=240){
        	       li.style.transform=`rotate(${curdeg}deg)`
        	       li.appendChild(item)
        	       fragment.appendChild(li)
        	     }
        	 }
        	 var itemwrap = document.querySelector('.jixulvitemwrap')

        	 itemwrap.appendChild(fragment)
        	 }

        	 render(50);