使用Javascript / jQuery

Question

HTML：

<div class="icon">
  <div class="iconBorder">
    <div class="iconContent"></div>
  </div>
</div>

使用Javascript：

steps = 1
loops = 100 / steps
increment = 360 / loops
half = loops / 2

percentage = 35

if (percentage < half) {
  nextdeg = 90 + (increment * percentage)
  $('.icon .iconBorder').css('background-image', 'linear-gradient(90deg, #263238 50%, transparent 50%, transparent), linear-gradient(' + nextdeg + 'deg, white 50%, #263238 50%, #263238)')
} else {
  nextdeg = -90 + (increment * (percentage - half))
  $('.icon .iconBorder').css('background-image', 'linear-gradient(' + nextdeg + 'deg, white 50%, transparent 50%, transparent), linear-gradient(270deg, white 50%, #263238 50%, #263238)')
}

我有上面的代码，JSFiddle根据percentage的值变化，在圆形图标周围创建边框。我想为图标周围的边框设置动画，使其看起来从0％（0˚）开始，然后移动到提供的百分比，在这种情况下为65％（126˚）。

我也希望动画能够轻松进出。我不确定如何实现这一点，因为我不能简单地使用CSS转换，因为我首先使用CSS hack来创建使用渐变背景的边框。关于如何做到这一点的任何想法？感谢。