CSS 效果 / 015
CSS Loading 效果產生器
六種常見的 CSS Loading 效果，即時預覽並一鍵複製，貼上就能用，不需要任何依賴。
旋轉圈
最常見的讀取指示，一個缺口圓環持續旋轉。
三點跳動
三個圓點依序放大縮小，常見於聊天輸入中的提示。
脈衝圓點
一個圓點持續向外擴散並淡出，像水波紋。
進度條掃動
不確定進度時常用的橫條，色塊來回掃過整條軌道。
骨架屏
內容載入前先鋪一塊會閃爍的灰底，常見於文章與卡片列表。
雙色圓環
兩段不同透明度的弧線一起旋轉，比單純的旋轉圈多一點層次。
為什麼做這個
每個專案幾乎都需要 loading 效果，但手刻 keyframes 每次都要重新試角度跟時間曲線。這裡把六種常見樣式做成隨拿隨用的清單，全部用 currentColor 跟 color-mix() 寫，貼到任何專案裡都會自動吃當下的文字顏色，不用另外改色碼。
這個怎麼用
六種效果都是純 CSS，不需要 JavaScript 或外部套件。複製出來的內容第一行是註解，寫著這個效果建議搭配的 HTML 結構（例如三點跳動需要三個 span），照著貼上結構、掛上 class 就能用。
顏色不用自己改。多數效果直接用 currentColor，套用 class 的元素（或它的父層）設定 CSS 的 color 就會跟著換色；骨架屏跟進度條的底色軌道則用 color-mix() 從 currentColor 混出淡色的底，同樣只要換 color 就會連動，不用去改 CSS 內部的數值。
color-mix() 是比較新的 CSS 語法，現代瀏覽器（Chrome、Edge、Firefox、Safari 近兩年的版本）都支援。如果專案需要相容更舊的瀏覽器，把 color-mix() 那幾行換成固定的 rgba() 顏色即可，動畫本身不受影響。
常見問題
這些效果需要載入什麼函式庫嗎？
不用。全部都是純 CSS，沒有 JavaScript，也沒有外部套件，複製貼上到你的樣式表就能用。
顏色要怎麼改？
多數效果的顏色用 currentColor，在套用 class 的元素（或它的父層）設定 CSS 的 color 屬性就會跟著換色。骨架屏、進度條的底色軌道用 color-mix() 從 currentColor 混出淡色版本，同樣只要換 color 就會連動，不需要改 CSS 內部的程式碼。
color-mix() 這個 CSS 語法瀏覽器都支援嗎？
現代瀏覽器（Chrome、Edge、Firefox、Safari 的近兩年版本）都支援。若需要相容更舊的瀏覽器，把 color-mix() 那幾行改成固定的 rgba() 顏色即可，動畫效果不受影響。