今天要介紹的「CSS Loaders」號稱全世界最大的載入動畫合集，這裡收錄超過 600 個僅使用單一元素製作的 CSS 載入動畫，這些動畫不需要用到 JavaScript，專注於更好的效能與可自訂性，適用於網頁、應用程式以提供更流暢的使用者體驗，所有動畫都可以在線上預覽、一鍵複製 CSS 原始碼。
CSS Loaders 網站將載入動畫以形狀、類型等方式分類，每個類別都能找到不少獨特的單一元素 CSS 動畫，例如有經典、形狀、點狀、旋轉器、圓形、翻轉、3D、進度條、彩色、發光體、條狀等各種類型，使用者只需要找到合適的載入動畫，點選「複製 CSS」即可取得相關原始碼。
雖然操作過程很簡單，但如果需要更多自訂，例如調整動畫的顏色、大小和速度，還是必須學會手動修改 CSS，不過純 CSS 載入動畫具有相當好的相容性，在現代瀏覽器（例如 Chrome、Firefox）都能正確顯示，而且也不會對網站速度或 DOM 造成太大負擔。
網站資訊
網站名稱：CSS Loaders
網站鏈結：https://css-loaders.com/
使用教學
開啟 CSS Loaders 後首頁會隨機顯示一個載入動畫，可以直接預覽效果或是快速複製 CSS 程式碼。
從 CSS Loaders 網站左側選單可以找到各種載入動畫分類和數量，隨意點選後就會看到各種 CSS 動畫預覽，這些都是使用純 CSS 程式碼做出來的效果，無論網頁、應用程式開發都可以使用。
要加入「載入動畫」會需要使用一個 div 元素，在網頁上方可找到（在 CSS Loaders 網站的程式碼區最上方可以看到）。
將滑鼠游標移動到載入動畫上方，點選「Copy the CSS」即可將 CSS 程式碼複製到剪貼簿。
使用線上編輯器 CodePen 測試一下效果，這項服務支援 HTML、CSS、JavaScript 即時預覽，將 HTML 代碼先貼上，接著把複製的載入動畫 CSS 也貼上另一欄位，就能預覽載入動畫效果囉！
當然這些載入動畫都具有可自訂性，包括顏色、速度或是大小等，但還是要對 CSS 有基本的了解（直接丟給 AI 協助修改也是一種方法）。
值得一試的三個理由：
- 提供超過 600 個單一元素 CSS 載入動畫，涵蓋多種風格與類型
- 無需 JavaScript，純 CSS 動畫確保網站速度不受影響
- 一鍵複製 CSS 程式碼，亦可自訂顏色、大小與速度
