跳到工具
JoeLucky

點擊工具頁的「收藏」加入

工具類別

程式碼截圖CSS 漸層產生器玻璃擬態產生器Box Shadow 產生器CSS 載入動畫SVG Blob 產生器SVG 轉 PNG色彩對比檢查工具PX／REM／EM 轉換器
JoeLucky

實用好用的在線工具集合站

隱私政策服務條款

© 2026 JoeLucky®. 版權所有。

  1. JoeLucky
  2. /CSS 與設計
  3. /CSS 載入動畫

CSS 載入動畫

生成多種純 CSS 載入動畫效果

相似CSS 與設計

查看全部
程式碼截圖

將程式碼轉成美觀的分享圖片，支援多種主題

開啟 →
CSS 漸層產生器

視覺化設計線性、放射、圓錐漸層，即時複製 CSS 程式碼

開啟 →
玻璃擬態產生器

即時預覽玻璃擬態效果，一鍵複製 CSS 程式碼

💬 使用者留言

?

還沒有留言，搶先留下你的想法！

什麼是CSS 載入動畫？

從 10 種純 CSS 載入動畫中挑選，調整顏色、尺寸與速度後複製 HTML 與 CSS。不依賴 JavaScript，可直接用在任何網頁或框架。

如何使用？

  1. 從上方選擇 10 種動畫之一：旋轉圓圈適合全頁載入、三點跳動適合聊天泡泡、骨架屏適合內容佔位、漣漪適合按鈕等待。
  2. 左側「動畫設定」可調整顏色（色盤）、尺寸（20～80px）與速度（0.3～3.0 秒），右側點狀網格背景上即時預覽動畫效果。
  3. 「速度」數值愈小動畫愈快；一般載入動畫建議 0.8～1.5 秒，太快（< 0.5s）或太慢（> 2s）都會影響使用者體驗。
  4. 預覽區右上角有三個按鈕：「HTML」單獨複製結構、「CSS」單獨複製樣式、「複製全部」一次取得含說明標記的完整代碼。
  5. 所有動畫為純 CSS 實作，零 JavaScript 依賴，可直接貼入靜態 HTML、React、Vue 或任何框架專案。

常見問題

CSS 載入動畫工具提供哪些類型？

旋轉圓圈、點點跳動、進度條、波浪、脈衝等多種純 CSS 動畫效果。

這些動畫需要 JavaScript 嗎？

不需要，全部使用純 CSS animation，零 JS 依賴。

可以自訂顏色和大小嗎？

可以，提供顏色選擇器和大小調整，即時預覽並輸出 CSS。

選擇動畫類型

動畫設定

#6366F1
尺寸40px
速度（秒）1.0s

⚡ 速度值愈小 = 動畫愈快

即時預覽 — 旋轉圓圈
CSS Code
<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>

<!-- CSS -->
<style>
.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
開啟 →