​

​

function render(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('.pertext')

  text.innerText=per*100 + '%'

​

  for(var i=0;i<itemnum;i++){

    var item = document.createElement('div')

    item.className = "item"

    if(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('.itemwrap')

​

itemwrap.appendChild(fragment)

}

​

render(50)

​