CSS Loaders 是一個專門提供 CSS 載入動畫的網站平台，最大的特色就是所有動畫都只需要使用單一 div 搭配 class=loader 的 HTML 語法就能輕鬆實現。這些動畫完全不需要用到 JavaScript，專注於更好的效能表現與可自訂性，讓你的網頁或應用程式能夠提供更流暢的使用者體驗。網站內的所有載入動畫都可以在線上直接預覽效果，看中了哪個動畫，只要一鍵點擊就能複製完整的 CSS 原始碼，超級方便！
CSS Loaders 將載入動畫以形狀、類型等方式進行分類，每個類別都能找到不少獨特的單一元素 CSS 動畫，包括：
- 經典類型：傳統常見的載入動畫效果
- 形狀類型：各種幾何圖形的動畫變化
- 點狀動畫：以點狀元素組成的載入效果
- 旋轉器：各式各樣的旋轉動畫
- 圓形動畫：以圓形為基礎的載入效果
- 翻轉動畫：具有翻轉效果的動畫
- 3D 效果：立體感十足的載入動畫
- 進度條：顯示載入進度的條狀動畫
- 彩色動畫：色彩豐富的載入效果
- 發光體：帶有發光效果的動畫
- 條狀動畫：以條狀為主的載入效果
所有動畫都是使用純 CSS 程式碼製作，不需要依賴 JavaScript，這表示：
- 不會對網站載入速度造成負擔
- 不會對 DOM 造成太大壓力
- 在現代瀏覽器（如 Chrome、Firefox）都能正確顯示
- 具有相當好的相容性
雖然複製的是現成的 CSS 程式碼，但你可以根據自己的需求調整：
如何使用 CSS Loaders？完整教學步驟
步驟一：進入 CSS Loaders 網站
首先開啟 CSS Loaders 官方網站（https://css-loaders.com/），進入首頁後會隨機顯示一個載入動畫，你可以直接預覽效果。
步驟二：選擇動畫分類
從網站左側選單可以看到各種載入動畫分類和數量，我們這次選擇「The shapes」分類來找一個適合的動畫。
步驟三：複製 CSS 程式碼
將滑鼠游標移動到選中的載入動畫上方，點選「Copy the CSS」按鈕，系統就會自動將 CSS 程式碼複製到剪貼簿中。
步驟四：準備 HTML 結構
根據說明，將複製好的 CSS 語法，放在區塊中，網頁 body 區塊中加入一個 div 元素，這是載入動畫所需要的 HTML 結構：
<body>
<div class="loader"></div>
</body>
將剛剛複製的 CSS 程式碼貼到你的樣式表中，載入動畫就完成了，接下來就可以控制何時要出現該動畫了。
當然，如果想要修改顏色、速度或是大小，可以將 CSS 塞給 AI 幫你是最最快的選擇。
CSS Loaders 是一個非常實用的免費資源，不管你是專業的開發者還是剛入門的新手，都能輕鬆使用這個平台來提升網站的使用者體驗。超多精心設計的載入動畫，一鍵複製的便利功能，加上純 CSS 的高效能表現，讓你的網站瞬間變得更加專業有趣。