效果

當我們想實現這樣一個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°只會改變圖形外觀，但是其座標起始位置還是右側。因此，更改起始座標可能還需要通過外部容器旋轉控制。)