用svg寫個圓環loading動畫

今天來學習下用svg畫個圓環進度條，效果模仿QQ登陸時候的loading

經過觀察能夠發現，這個進度條大部分是實線，最後一小段是個逐漸消失的線段。因此，咱們能夠把這個進度條分紅兩個path實現，消失那段用漸變效果。

咱們的圓環畫在一個200x200的座標系內（由於要加上線條2px寬度，因此是204，剛畫的時候能夠把寬度設置大一點，容易觀察些），圓的半徑爲100，用transform="translate(100,100)"把座標中心移到中間位置能夠方便計算。

畫圓弧主要是是肯定起始點座標，利用簡單幾何學就能夠獲得。這裏圖簡單，先畫一個左半圓，再從底端開始畫一個1/4圓，獲得的座標均可以容易算到。

這樣各個端點的的座標是0,-100,0,100，0,100,100,0，漸變效果那段先隨便用個顏色。

http://jsfiddle.net/u5t4jL8c/...

接下來定義漸變，並應用到path中。

http://jsfiddle.net/u5t4jL8c/...

而後用animateTransform加上旋轉效果

http://jsfiddle.net/u5t4jL8c/...

Σ(っ°Д°;)っ，前面埋了個坑，用了translate，如今給transform加了rotate，translate就被重置了，折騰了很久，最後加了個g元素，用2個animateTransform搞定。

http://jsfiddle.net/u5t4jL8c/...

還沒來得及高興，打開控制檯一看，出現一條警告

⚠️ SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

日了鵝，白折騰，最後仍是要配合CSS3動畫

http://jsfiddle.net/u5t4jL8c/...