使用SVG实现圆环loading进度效果

效果

当我们想实现这样一个loading效果，有这么几种选择，第一种是使用canvas，第二种是借助css3的transform属性。这两种方法有一个问题，在webkit内核的浏览器上存在毛边。那么如果只兼容IE9+的浏览器，可以考虑使用SVG

具体代码

SVG的实现效果非常简单

   <svg width="440" height="440" VIEWBOX="0 0 440 440">
        <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none">circle>
        <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069">circle>
    svg>

实现这个效果的关键因素在于stroke-dasharray="0 1069" 第一个参数代表蓝色进度条的长度，第二个参数代表灰色背景的长度。这里两个参数的和必须是1069，也就是圆的周长

如果我们想拖动下面的进度条自动更新进度，只需要通过js改变这个属性值就可以。js代码如下所示

   if(window.addEvenetListener){
      var range = document.getElementById('range');
      if(!range) return;
      //获得第二个圆的引用
      var circle = range.getElementsByTagName('circle')[1];
      range.addEvenetListener('change', function(){
          var percent = this.value / 100;
          //圆的周长
          var perimeter = Math.PI * 2 * 170;
          //stroke-dasharray属性的两个参数和必须为周长
          circle.setAttribute('stroke-dasharray', perimeter * percent + ' ' + perimeter. * (1 - percent));
      })
   }

css代码如下所示

    circle {
        -webkit-transition: stroke-dasharray .25s;
        transition: stroke-dasharray .25s;
    }

stroke-dasharray在SVG中描边是代表虚线，第一个参数是虚线的宽度，第二个参数是虚线之间的间距。默认stroke-dasharray的起始位置在右侧，而不是上方，因此，我们需要使用transform逆时针旋转90°, 这就是第二个circle元素上面transform=”matrix(0,-1,1,0,0,440)”的由来。(iOS 手机上，transform逆时针旋转90°只会改变图形外观，但是其坐标起始位置还是右侧。因此，更改起始坐标可能还需要通过外部容器旋转控制。)