是的仿贬，看標(biāo)題能繞暈?zāi)恪?br> 那就通俗點(diǎn)纽竣，說點(diǎn)人說的話吧。就是下面這貨：
這種圖標(biāo)，以一眾UI設(shè)計(jì)師多年深厚的功底蜓氨，打眼一看就知道聋袋，一定是旋轉(zhuǎn)的loading圖標(biāo)。小伙伴稱之為什么呢语盈？漸變描邊嘛舱馅？之所以這么拗口的起了個角度漸變描邊這種鬼畜的名字，是因?yàn)閜hotoshop的漸變描邊有下面三種效果
最像角度漸變對不對刀荒？好了代嗤，名字介紹到此結(jié)束，進(jìn)入正題缠借。
這張圖片干毅，用ps來做，分分鐘的事情對不對泼返？然后CSS3一個旋轉(zhuǎn)動畫屬性就好啦硝逢，但是，作為深中SVG之毒的假UI來說绅喉，這樣絕不能滿足渠鸽！一定要用SVG來實(shí)現(xiàn)，然后各種尺寸一個圖標(biāo)360度無死角適配柴罐。
好了徽缚，說做就做。
1.AI繪制
既然用SVG革屠，就少不了好基友AI了凿试，我們都知道AI是可以導(dǎo)出一切SVG的，AI里面怎么完成似芝，我不專業(yè)那婉，只想到了一個簡單的方法，先做一個混合党瓮，然后圓周（開放路徑）替換混合軸來完成详炬。其他設(shè)計(jì)師小伙伴有其他更好的方法都可以。
為了讓漸變效果更自然寞奸，我混合選項(xiàng)那里用的是指定的距離1px痕寓。好了，完成蝇闭，導(dǎo)出SVG，加animation設(shè)置硬毕，轉(zhuǎn)起來呻引，鞠躬，謝幕吐咳，教程到此結(jié)束（你特么是在逗我嘛逻悠？）元践。
等等，不要走童谒，回來单旁，來來來，你看看饥伊，你的SVG有多大象浑。
37K，天雷滾滾琅豆，我導(dǎo)出png的話才只有5K多點(diǎn)愉豺。說好的代碼實(shí)現(xiàn)更簡單呢茫因？蚪拦！
暫時壓制住狂躁的心，然后來看一下SVG代碼冻押。
我隨隨便便貼上一點(diǎn)看一下：
里面是N多個
<circle>來組成的。嗯洛巢，也不是太多括袒，五百多個而已嘛±窃ǎ回想一下我們在AI中使用替換混合軸來實(shí)現(xiàn)這種效果的原理，然后把指定距離變大一些（我由1px改成了10px）狈邑，看一下效果
AI是如何實(shí)現(xiàn)這種漸變效果的一目了然城须，很多圓一個個拼接起來，顏色逐漸變化米苹，這才從視覺上組成了一個圓的類似角度漸變的描邊效果糕伐。
當(dāng)然了蘸嘶，這么蛋疼的SVG是不能用的良瞧，說好的好維護(hù)呢？回頭要改個顏色我去源文件改五百多個色值训唱？還不是要AI重新生成，重新導(dǎo)出况增？那到底能不能破赞庶？
2.變通的實(shí)現(xiàn)方法
CSS3的漸變支持線性漸變和徑向漸變，所以，想個辦法歧强，能不能利用基礎(chǔ)的漸變來生成這個圖形澜薄？在死死的盯住這個圖長達(dá)五分鐘之久后摊册，發(fā)現(xiàn)這個圖拋棄頂部圓形不算肤京，似乎是一分為二的兩個線性漸變拼成的。
既然是線性漸變茅特，那我們可以放心大膽的玩起來了，首先温治，我在AI中繪制了一個圓環(huán)饭庞，然后擴(kuò)展描邊熬荆，圖形從中分割開舟山，生成兩個半圓環(huán)。
我們需要的就是這兩個半圓環(huán)的<path>路徑卤恳。
當(dāng)然了，對于非設(shè)計(jì)師的玩法也很簡單（我們暫且稱之為開發(fā)人員玩法）突琳，一個大圓復(fù)制兩份若债，利用內(nèi)部的小一些的同心圓蒙版產(chǎn)生圓環(huán)，然后兩個圓環(huán)一個加左半邊蒙版蠢琳，一個加右半邊蒙版，我懶镜豹，直接借助AI導(dǎo)出路徑最喜歡傲须。
得到兩個半圓環(huán)路徑之后趟脂，現(xiàn)在有兩個方法可以選擇泰讽，先來看第一種：直接給兩個半圓進(jìn)行線性漸變疊加，然后補(bǔ)充上頂部的圓形
似乎還不錯昔期，看看導(dǎo)出的SVG（我簡化了一下）
<svg>
<style type="text/css">
.st1{fill:url(#SVGID_1_);}
.st2{fill:url(#SVGID_2_);}
.st3{fill:#4886CD;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="200">
<stop offset="0" style="stop-color:#4886CD"/>
<stop offset="1" style="stop-color:#9DBFE4"/>
</linearGradient><!--深藍(lán)到淺藍(lán)的漸變-->
<path class="st1" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="200">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#9DBFE4"/>
</linearGradient><!--白色到淺藍(lán)的漸變-->
<path class="st2" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/>
<circle class="st3" cx="100" cy="10" r="10"/>
</svg>
代碼比較清晰，AI定義了兩個漸變“SVGID_1_”和“SVGID_2_”硼一，然后兩個半圓環(huán)路徑去調(diào)用不同的漸變累澡。
這時般贼，我們只要在CSS樣式里加上下面這段定義旋轉(zhuǎn)動畫的代碼：
@keyframes load{
0%{transform:rotate(0)}
100%{transform:rotate(-360deg)}
}
#load{animation:load 1s linear infinite; transform-origin:center center;}
然后把組成圖形的<path>和<circle>都用一個<g>標(biāo)簽包起來永乌，然后<g id="load">來調(diào)用動畫惑申，（最后會放最終代碼的翅雏，這里不再羅里吧嗦了），好啦人芽，轉(zhuǎn)起來望几，走你萤厅。
速度橄抹、方向神馬的不滿意再調(diào)整，都是小事情楼誓。然后看看文件大小，1.4K名挥，減少了35K疟羹，似乎不起眼禀倔，但是榄融，當(dāng)用另外一種表達(dá)方法，縮小到原來的3.7%救湖，減少了96%的體積，嘖嘖嘖鞋既，是不是要上天力九？而且SVG代碼里一共三個色值，隨時隨地方便更換跌前！
還沒完，作為一枚有理想有追求的loading圖標(biāo)检吆，這樣就算完了嘛舒萎？我還沒說方法2呢蹭沛！
3.漸變優(yōu)化
近看這個圖標(biāo)會發(fā)現(xiàn)兩個協(xié)調(diào)不好的地方臂寝，一個是頂部的圓和背景圓環(huán)交接處，一個是兩個半圓環(huán)交界處摊灭，出現(xiàn)的原因很簡單咆贬，我用漸變填充的圓形來表示一下帚呼。
也就是說掏缎，雖然那個一堆
<circle>形成的漸變環(huán)很魔性皱蹦，但是按照圓周弧形漸變眷蜈，而我們上面一分為二的漸變則是垂直方向的漸變沪哺，好了，說了一堆酌儒，到底能不能破？能忌怎！下面跟著我來做一個障眼法籍滴。
我們都知道榴啸，即使在軟件里孽惰，也是可以任意修改漸變色的停靠點(diǎn)的鸥印，如上圖所示，我把兩個圓環(huán)的基礎(chǔ)的線性漸變進(jìn)行了拆分辅甥，左側(cè)分為L1（白→淺藍(lán)）漸變區(qū)和L2（淺藍(lán)填充）純色區(qū)酝润，右側(cè)分為R1（藍(lán)色填充）純色區(qū)、R2（藍(lán)→淺藍(lán)）漸變區(qū)和R3（淺藍(lán)填充）純色區(qū)璃弄，如此拆分的目的就是為了讓原來圖標(biāo)頂部的小圓形對應(yīng)的底部圓環(huán)所在區(qū)域?yàn)楹推湎嗤募兩硐目椋撞恳捕际羌兩畛涫韪溃瑢?shí)現(xiàn)左半環(huán)和右半環(huán)的無縫拼接。
方法有了浑塞，實(shí)際操作中，零代碼基礎(chǔ)的UI們可以調(diào)節(jié)AI中漸變來實(shí)現(xiàn)政己，有一丟丟SVG基礎(chǔ)的酌壕，可以直接通過上面SVG漸變對應(yīng)的代碼
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="200">
<!--右半圓環(huán)的漸變-->
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="200">
<!--左半圓環(huán)的漸變-->
調(diào)整y值（垂直方向歇由，Y值即吐央梗靠點(diǎn)位置），比如這里沦泌，我的小圓的半徑=10，即環(huán)徑為20谢谦，那么左側(cè)對應(yīng)y1="0",y2="180",右側(cè)對應(yīng)y1="20",y2="180"释牺。
調(diào)整后效果如下：
完美没咙！
好了猩谊，下面轉(zhuǎn)起來
收工！
既然騙眾位客官進(jìn)來了祭刚，那就放上通用代碼和注釋吧预柒，需要什么顏色，直接調(diào)整就可以了袁梗，至于尺寸嘛，上網(wǎng)搜一篇關(guān)于SVG的viewBox和width憔古、height的關(guān)系遮怜，各種尺寸無壓力，或者直接交給開發(fā)人員就好了嘛鸿市。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 200 200"
xml:space="preserve">
<!--#4886CD為深色值 #9DBFE4為中間值 可以隨意修改-->
<style type="text/css">
.left{fill:url(#left);}
.right{fill:url(#right);}
.top{fill:#4886CD;}
@keyframes load{
0%{transform:rotate(0)}
100%{transform:rotate(-360deg)}
}
#load{animation:load 1s linear infinite; transform-origin:center center; }
</style>
<g id="load">
<linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
<stop offset="0" style="stop-color:#4886CD"/>
<stop offset="1" style="stop-color:#9DBFE4"/><!--藍(lán)到淺藍(lán)漸變-->
</linearGradient>
<path class="right" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/><!--右半圓環(huán)-->
<linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#9DBFE4"/><!--淺藍(lán)到白色漸變-->
</linearGradient>
<path class="left" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/><!--左半圓環(huán)-->
<circle class="top" cx="100" cy="10" r="10"/>
</g>
</svg>
比如你想來個熱情洋溢的紅黃色系的
直接把三個色值套進(jìn)代碼里锯梁，分別替換深色，中間色和淺色焰情。
得到效果如下
或者紫色
套色值
以及粉色小清新
o(￣︶￣)o
