環形 CSS 載入動畫產生器可從標準邊框與單一 @keyframes 規則產生自含式的旋轉圖示,而大量作業流程的意思是:為不同尺寸、顏色與持續時間產生一組一致的變體,而不是每次需要載入動畫時都去搜尋程式碼片段。CSS 載入動畫產生器會在有限的輸入範圍內一次建立一個精簡的環形,匯出該 class 以及一個獨立命名的 keyframe,而且全程在瀏覽器中執行。你可以快速迭代多種設計,並保持輸出一致,這就是「大量」在這裡的實際意義:一個可重現的流程,從單一工具產出多個可直接貼上的旋轉圖示,不需要圖片、SVG 檔案、JavaScript 動畫迴圈或第三方套件。
這個產生器刻意保持精簡。相同的寬度與高度會建立一個正方形區塊,而圓形的 border-radius 則將該區塊轉為環形。完整邊框使用軌道顏色,而 border-top-color 則以啟動顏色繪製其中一個區段。keyframe 會將元素旋轉三百六十度,而 animation 縮寫則以線性計時與無限重複套用所選的持續時間。由於幾何結構屬於 CSS 而非點陣圖資產,旋轉圖示在任何像素密度下都能保持銳利,任何支援標準 CSS 動畫(依據 CSS Animations Level 1 規範)的瀏覽器都能將其呈現出來。
為何有限的產生方式優於複製貼上的片段
大多數旋轉圖示程式庫會提供十幾種樣式,並假設一種尺寸適用於所有情況。有限的產生器則反其道而行:它限制每個輸入,使輸出永遠可用,再讓你在幾分鐘內產生多個變體。這些有限的輸入並非裝飾性的限制。環形寬度若大於尺寸的一半,會使內部開口塌陷,並把旋轉圖示變成實心圓盤,這就是工具會拒絕該輸入、而非默默呈現看似損壞結果的原因。非有限的數值會直接遭到拒絕,而空白的數值欄位則會變成無效,而不是變成零,因此你無法意外產生 0×0 的方框或 0 秒的動畫。對大量作業流程而言,這點很重要,因為你所複製的每個變體都已經驗證可正確呈現——你不必再四處尋找在某個版面能用、在另一個版面會壞掉的片段。
輸入、限制與產生器接受的內容
下表摘要說明產生器經過驗證的輸入,以及每項限制存在的原因。每一列反映的是工具的官方文件限制,而非對於 CSS 旋轉圖示應如何運作的推測假設。
| 輸入 | 接受範圍 | 限制原因 |
|---|---|---|
| 旋轉圖示尺寸 | 12–160 px | 較小的值會讓動作難以察覺;較大的值則會佔據版面。 |
| 環形寬度 | 1 px 至尺寸的一半 | 環形過厚會使內部開口塌陷,並把環形變成實心圓盤。 |
| 啟動與軌道顏色 | 六位數十六進制(例如 #0ea5e9) | 標準的 CSS 顏色語法讓儲存的檔案不需預處理器就能自含使用。 |
| 持續時間 | 0.2–5 秒 | 過快的動作可能令人不適;過慢的動作則可能看起來像靜止。 |
| 動畫行為 | 線性、無限旋轉 | 在請求進行中提供持續的回饋;keyframe 旋轉 360°。 |
十六進制輸入會拒絕簡寫、具名顏色與 rgb(),以確保儲存的檔案保持自含。如果你需要透明度,請將旋轉圖示疊在實心背景上,而不要傳入 alpha 通道,因為產生器只會寫入十六進制。
逐步建立環形旋轉圖示
此產生器圍繞四個互動設計:選擇幾何、選擇顏色、調整時間,然後複製 CSS。無論你需要的是單一旋轉圖示或多個一致的變體,相同的順序都適用。
- 選擇旋轉圖示尺寸與環形寬度。從符合你實際出貨版面的尺寸開始——按鈕通常需要 16 到 24 px,整頁請求通常需要 48 到 64 px——再挑選一個能保留可見開口的環形寬度。48 px 的旋轉圖示搭配 4 px 的環形寬度,在多數螢幕上都能清楚閱讀。
- 設定對比明顯的啟動與軌道顏色。啟動區段必須在淺色與深色主題中都能從軌道中突顯出來。像 #0ea5e9 配 #e2e8f0 這種高對比組合,既能保持旋轉圖示清晰可辨,又不會壓過附近的內容。
- 一邊觀察即時旋轉,一邊調整持續時間。預覽是一個真實的狀態元素,使用與所複製 CSS 相同的尺寸、邊框、顏色與時間設定,因此所見即所出貨。挑選符合預期請求長度的持續時間:短請求每圈旋轉在 0.8 秒左右感覺較佳,較長的請求則可延長至 1.5 到 2 秒而不會顯得遲鈍。
- 複製 CSS,接著加入狀態文字、減少動畫偏好規則,以及真正的載入狀態邏輯。所複製的基準包含一個 .loader class 與一個獨立命名的 @keyframes 規則。將其貼入你的樣式表,若專案中已使用相同識別符,則重新命名 class 或 keyframe,再將其與實際的載入生命週期串接起來。
為每個狀態產生一致的旋轉圖示
大量執行通常意味著產生兩到四個共享視覺語言的變體:用於按鈕的小型內嵌旋轉圖示、用於卡片的中型旋轉圖示、用於整頁載入的大型置中旋轉圖示,有時還會為長時間上傳準備一個慢速變體。保持一致性的最快方法是先固定啟動與軌道顏色,再以相同的十六進制配對與隨尺寸溫和調整的持續時間來產生每個尺寸——通常較大的旋轉圖示轉速會稍慢,以維持相近的感知速度。
你也可以為不同產品介面產生品牌化變體。淺色主題介面以鮮明的啟動顏色搭配柔和的軌道;深色主題介面則將軌道換成較深的灰色,同時保留相同的啟動十六進制。由於產生器永遠會寫入獨立命名的 keyframe,你可以將多個變體貼到同一份樣式表而不會發生衝突,並能將每個 class 重新命名以反映其介面(例如 .loader--button、.loader--card、.loader--page),而不必更動 keyframe 邏輯。
無障礙、減少動畫偏好與載入生命週期
持續旋轉的圖示只是視覺回饋。生產環境的元素需要一個可存取的名稱或附近的狀態文字,以說明正在進行的事情;預覽使用 role="status" 與 aria-label,但你的實作應符合實際任務,例如「載入結果」或「上傳檔案」,依據 MDN 動畫指南。請勿反覆宣告快速且微小的更新。當進度可以測量時,使用帶有 value 屬性的 progress 元素通常比不確定的旋轉圖示更具資訊性。
持續旋轉必須尊重減少動畫偏好的設定。所複製的基準刻意保持直接易懂,因此請加入 @media (prefers-reduced-motion: reduce) 規則,根據產品的無障礙政策來減緩、簡化或取代動畫,並遵循 CSS Animations Level 1 規範中所定義的 timing-function 與 iteration-count 語意。請以強制色彩、高對比、深色主題、縮放與小螢幕測試旋轉圖示。軌道與啟動顏色需要足夠的區別,但旋轉圖示不應成為使用者得知內容正在載入的唯一方式。保留版面空間,以避免其出現或消失時造成版面位移。
動畫效能通常表現良好,因為 transform 旋轉可以有效率地由合成器處理,但同時存在的多個旋轉圖示仍會產生視覺雜訊並消耗資源。僅在需要回饋之處進行繪製,並在操作完成時立即移除載入動畫。載入旋轉圖示絕不可隱藏已失敗或停擺的操作;應公開逾時、取消、重試與錯誤狀態。請以真實的網路延遲測試載入動畫,而不只是使用永久的展示動畫,並確認其在成功、取消或錯誤後能可靠地消失。
命名、衝突與整合提示
由於產生器永遠會輸出一個 .loader class 與一個帶有唯一後綴的 @keyframes 規則,當你貼上單一輸出時,衝突幾乎不會發生。如果你將多個輸出貼到同一份樣式表,每次執行的 keyframe 後綴都不同,因此它們能安全共存。若你的專案已將 .loader 用於其他用途,請在提交前重新命名貼上區塊中的 class。keyframe 名稱亦同——請為每個介面挑選一個穩定的識別符,以免未來的更新破壞較舊的變體。
此產生器不會加入 JavaScript 狀態管理、覆蓋層定位、對話框行為、骨架內容或進度計算。這些決策屬於周圍的應用程式,而這條界線正是讓輸出保持小且可預測的原因。所有作業都在瀏覽器本機執行,設定不會被上傳或保留,不需要帳號,也不會引入新的相依套件。只要保持精簡,輸出就能持續發揮效用:一個 class、一個 keyframe,以及你已經掌控的生命週期邏輯。
相關閱讀:CSS 對話泡泡產生器速查表:邊框與尾巴。
相關閱讀:大量 CSS 條紋產生器:元件的圖案組合。