loading動畫是一個項目中必不可少的部分逐样，一個好的loading動畫不僅可以讓UI界面更加友好仗哨，更可以緩解用戶等待加載的焦慮情緒晚吞，從而提升用戶體驗桥言。
目前對于前端而言萌踱，實現(xiàn)loading動畫的方法大致有幾種：
- 直接插入GIF圖片
- CSS制作loading動畫
- SVG格式的loading動畫
在我過往的項目經(jīng)歷中，這幾種方法我都使用過号阿，但是各有利弊并鸵。
GIF圖片直接插入無疑是最簡單的，但是不免出現(xiàn)圖片占用空間大扔涧，替換成本高园担，網(wǎng)絡(luò)慢的時候出現(xiàn)loading動畫延遲加載的情況，大大降低用戶的體驗枯夜；CSS制作的動畫設(shè)計空間比較大弯汰，前端工作，因為是CSS代碼實現(xiàn)湖雹，所以占用空間不大蝙泼，而且流暢度以及體驗都很好；SVG在繪制路徑上非常靈活劝枣，實現(xiàn)動畫十分容易汤踏，用來做loading動畫反而有點大材小用了织鲸。
在平時的項目中，我更傾向于使用最后一種方法溪胶。個人認為是最佳的實現(xiàn)方法搂擦，以下為大家分享前端制作一個簡單的loading動畫并使用的方法。
1. 尋找素材
推薦 https://loading.io 這個網(wǎng)站可以高度定制你的loading哗脖，包括搭配的顏色瀑踢、大小、速度等才避。
2. 導(dǎo)出成Base64格式
找到你喜歡的動畫并調(diào)整到合適的樣式后橱夭。緊接著需要導(dǎo)出成svg格式，這里注意桑逝，因為部分的loading動畫需要收費棘劣，要知道！我們是做前端的（滑稽）楞遏，這時你需要：
1.打開控制臺點擊選擇標(biāo)簽
2.選擇點擊你調(diào)整好的動畫
3.將SVG標(biāo)簽整個復(fù)制下來（注意：復(fù)制下來的<svg></svg>也可以直接在網(wǎng)頁中使用茬暇，直接跳過后面所有步驟）
4.新建空的.svg文件并將復(fù)制下來的SVG粘貼進去
5.打開 在線轉(zhuǎn)換Base64 將.svg文件轉(zhuǎn)換成Base64編碼
3. 在你的網(wǎng)頁上使用動畫
有兩種使用方式，一種是css方式寡喝；一種是直接img標(biāo)簽引用糙俗。
.box{
background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
<img src="data:image/jpg;base64,/9j/4QMZR..." />
成品見下圖
