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動畫反而有點大材小用了。

在平時的項目中，我更傾向于使用最后一種方法。個人認(rèn)為是最佳的實現(xiàn)方法，以下為大家分享前端制作一個簡單的loading動畫并使用的方法。

1. 尋找素材

推薦 https://loading.io 這個網(wǎng)站可以高度定制你的loading，包括搭配的顏色、大小、速度等。

https://loading.io

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粘貼進(jìn)去
5.打開 在線轉(zhuǎn)換Base64 將.svg文件轉(zhuǎn)換成Base64編碼

復(fù)制SVG標(biāo)簽

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..." />

成品見下圖

最終效果