Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

如果在開發網站、應用程式或軟體專案時需要讀取中的動態圖示，UI Ball 有個名為「Loaders」網站收錄 24 種類型獨特、可自訂且輕量化的載入動態圖，Loaders 也是一個 React.js 套件資料庫，打開網站就能在線上直接預覽這些很眼熟的動畫圖，對於要取用拿去開發專案來說非常有用，也不用上網到處尋找動態圖，Loaders 所有動態圖示都有提供對應的 React、HTML 和 CSS 原始碼。

依照說明，Loaders 有 24 種獨特、有趣且適用於各種情境的動態載入圖，使用者可依照專案進行各種自訂，像是尺寸大小、顏色、線寬和速度，圖示部分非常輕量化，單一檔案在壓縮後小於 1 kb，而且沒有任何 GIF 圖檔，完全使用現代化 CSS 和 SVG 建構。

Loaders
https://uiball.com/loaders

使用教學

STEP 1

打開 Loaders 網站會看到 GitHub 和 npm 鏈結，往下捲動會有以 npm 新增、匯入套件的指令，繼續往下拖曳就會看到這些讀取中的動態圖示。

STEP 2

有些讀取中的動態圖看起來非常熟悉，也有一些很引人注目、很可愛很特別，從右上角切換不同檢視模式，因為數量不是太多，直接瀏覽應該就可以了。

那麼大家也或許可以猜到動態圖的功能吧？為了讓使用者有更好的使用體驗，同時在等待時不會那麼無聊（提醒使用者真的在載入中，不要隨意跳離此畫面），適當使用類似的過場動畫有助於讓使用者的感受較好，也有一種更為流暢快速的感覺。

STEP 3

點選圖示圖案後會有更大的預覽圖，點選左上角「Source」顯示原始碼，Loaders 會有 React 是用的語法，或是 HTML、CSS 樣式表。

點選後就會快速複製到剪貼簿。