CSS 載入動畫是一個小型旋轉元素,由一個 HTML 容器、一個基於邊框的環,以及讓它繞自身中心旋轉 360 度的關鍵影格動畫所組成,而取得它的最快方式是使用 CSS 載入動畫產生器,讓你設定尺寸、環粗細、兩個對比色,以及旋轉持續時間,然後將驗證過的 HTML 和 CSS 複製到剪貼簿。因為結果就是純 CSS,所以同一個旋轉指示器在任何能服務靜態檔案的技術堆疊中都能運作,從純 HTML 頁面到 React 元件,再到靜態網站產生器的輸出都沒問題。一個好的產生器能省去猜邊框寬度、挑選不會被裁切的尺寸,以及手寫動畫語法的試錯過程,同時仍會提供你可以之後再編輯的易讀原始碼。最終結果是一段確定性的、可直接複製的程式碼片段,而不是一個黑盒動畫。
你不需要任何圖片、字型圖示集,或外部函式庫,就能交付一個乾淨的載入指示器。經典的旋轉指示器是由一個正方形元素搭配一致的邊框所構成,其中一條邊設為對比色,並透過旋轉完成一整圈。由這四個基本元件,你可以產生一個安靜的等待指示器、一個忙碌的進行中訊號,或一個與介面其餘部分風格一致的品牌化元素。挑戰在於:不做硬編碼的固定像素尺寸以避免在小螢幕上被裁切、挑選一個在 60Hz 螢幕上感覺靈敏的持續時間,並讓元素對鍵盤和輔助科技使用者保持可存取。
CSS 載入動畫產生器實際上會產生什麼
這個工具會產生一對確定性的程式碼區塊:一個小型 HTML 片段,把空白元素放到頁面上;以及一組 CSS 規則,負責設定元素大小、畫出圓形邊框、突顯其中一邊,並透過 CSS 動畫旋轉。輸出是有界限的,代表產生器會拒絕會裁切環或產生非正方形方框的數值。尺寸以 CSS 像素表示,環寬是第二個有界限的數值,永遠小於尺寸,兩個顏色則會對主色進行基本對比驗證。持續時間以秒為單位,而且永遠對應到 360 度的旋轉。
因為一切都是純 CSS,你可以把這段片段貼到樣式表、HTML 中的樣式區塊,或任何元件作用域的 CSS 管線中。日後若想改變外觀,你直接在自己的檔案中編輯變數風格的數值,而不是從頭重新產生。第二份片段副本會作為偏好減少動畫開啟的使用者的後備方案,系統層級啟用偏好減少動畫時會停止旋轉,同時保留視覺元素在原位,讓版面不會跳動。
挑選在真實頁面上閱讀舒適的數值
旋轉指示器的尺寸同時控制它的視覺重量,以及讓環可見所需的最小邊框寬度。在一般的桌面版面上,一個 40 到 64 像素的正方形能與按鈕和表單欄位並排而不會搶走焦點。在行動裝置上,縮小到 24 到 32 像素能讓旋轉指示器在緊密的狀態列中仍然可用,而 96 像素或更大的旋轉指示器只適合作為全頁佔位元素。環寬應該保持在方塊大小的一半以下,否則內圓會消失,動畫看起來就會像旋轉的圓盤而非環。
| 情境 | 典型尺寸 | 典型環寬 | 備註 |
|---|---|---|---|
| 行內按鈕或表單欄位 | 16 px | 2 px | 放在短標籤旁邊,以 vertical-align: middle 對齊。 |
| 狀態列或列表項目 | 20-32 px | 3-4 px | 搭配狀態文字以提升清晰度。 |
| 卡片或面板佔位元素 | 48-64 px | 6-8 px | 將旋轉指示器置中,加上平靜的描述性標籤。 |
| 全頁預載器 | 96 px 以上 | 10-12 px | 以 aria-busy 與可聚焦的標題封鎖頁面互動。 |
持續時間決定旋轉指示器感覺多麼忙碌。0.6 到 0.8 秒的旋轉讀起來快速且反應靈敏,適合通常較短的網路呼叫。1.0 到 1.2 秒的旋轉讀起來較平靜,在不知道實際等待時間時是較安全的預設值。超過 2 秒太多會讓指示器感覺遲鈍,應該避免。色彩對比是最容易出錯的地方:深色主色配深色軌道會消失,淺色主色配淺色卡片也一樣。淺灰軌道搭配單一強調色的預設組合是安全的,但深色軌道搭配淺色主色在較淺的頁面上也同樣有效。
產生載入動畫並複製程式碼
- 在瀏覽器中開啟 CSS 載入動畫產生器。
- 挑選一個符合旋轉指示器出現位置的像素尺寸,例如卡片狀態列用 48 px。
- 將環寬設為大約尺寸的八分之一,例如 48 px 方框中設 6 px,讓環保持可見卻不會吞掉內圓。
- 挑選一個與頁面背景對比的軌道色,然後挑選一個與軌道對比的主色。兩組好讀的搭配是淺灰配深藍,或近黑配白。
- 看著即時預覽旋轉時調整持續時間,在動作既不急促也不遲鈍時停下;1.0 秒是可靠的起點。
- 使用工具的複製按鈕複製 HTML 片段和 CSS 區塊,然後貼到你的頁面或元件中。
將旋轉指示器接到真實的載入狀態邏輯
單獨的 CSS 片段只是一個有樣式的元素。要表現得像真正的載入器,它必須在工作開始時出現、在工作結束時消失。最簡單的模式是把旋轉指示器包在一個容器中,容器的可見性由 JavaScript 狀態變數切換,同一個變數也在正在載入的區段上設定 aria-busy,讓螢幕閱讀器宣告忙碌狀態。最精簡的流程像這樣:預設以 display: none 隱藏旋轉指示器,fetch 開始時用 display: inline-block 顯示它,然後在 Promise 的 finally 區塊中再次隱藏,這樣即使發生錯誤,旋轉指示器也不會永遠轉下去。
真實的載入狀態邏輯還要處理工作完成得比使用者察覺旋轉指示器還快的情況。對於約 200 毫秒以下的工作,寧可使用短暫淡入或完全省略旋轉指示器,以避免閃爍。對於確實較長的工作,則保持旋轉指示器可見、在工作進行時更新伴隨的狀態文字,並確保該區段在完成前保持鍵盤可聚焦,讓螢幕閱讀器使用者能導航進入該區域並聽到狀態更新。
可存取性與減少動畫
動畫內容對經歷動暈、眩暈或前庭疾病的使用者來說是已知的可存取性疑慮,作業系統透過 prefers-reduced-motion 媒體查詢公開這個偏好設定。生產環境可用的 CSS 載入動畫應該永遠包含減少動畫的後備方案,把關鍵影格動畫換成平靜的脈動,或隱藏旋轉同時保留有色環在原位,讓版面不會跳動。這個後備方案是一小段 CSS 而不是腳本,而且在使用者於系統層級要求減少動畫時會自動啟用。因為規則來自使用者自己的設定而非猜測,不需要額外的偵測程式碼。
螢幕閱讀器不會把有樣式的 div 宣告為載入器,所以旋轉指示器必須搭配文字。兩種模式效果都不錯:在旋轉指示器元素上加上 aria-label="Loading" 屬性,或在同列放上一個視覺可見的狀態詞,例如「Loading…」。後者更理想,因為它也對短暫移開目光的視力正常使用者有幫助。對於全頁預載器,在容器上設定 role="status" 與 aria-live="polite",讓載入訊息在出現時被讀出、內容抵達時完成訊息也被讀出。遵循 WCAG 中關於動畫與狀態宣告的指引,比臨時發揮更可靠。
在瀏覽器與主題間測試旋轉指示器
現代瀏覽器對 CSS 動畫和關鍵影格的處理是一致的,但在上線前仍有幾個細節值得測試。確認旋轉指示器保持完美圓形,方式是為元素設定 border-radius: 50%,而不是依賴相等的寬與高,因為自訂版面中的一像素四捨五入誤差就足以暴露出略呈橢圓的環。透過切換 color-scheme 或在 :root 元素上切換 CSS 自訂屬性來檢查淺色與深色主題;產生的顏色不會自動改變,因為產生器挑選的是固定值,所以你可能會想把它們包進 CSS 變數中,讓主色能隨主題翻轉。把視窗縮窄並確認方框不會裁切到邊框。最後,啟用系統的減少動畫設定並重新載入:旋轉指示器仍應可見,但旋轉應停止。
如果你正在建立一組相關的小工具,你可能也會想要一個快速的方法來驗證你的旋轉指示器程式碼所嵌入的任何 JSON,而 JSON 格式化指南會逐步說明最乾淨的模式。對於更廣泛的 CSS 工作,3D 按鈕產生器逐步指南涵蓋視覺化 CSS 工具如何輸出可重複使用的規則。如果你只需要形狀基本元件而非動畫,3x3 CSS 格線指南則以版面配置說明同一種視覺化產生器模式。當你把設計系統擴展到單一旋轉指示器之外時,這些都是有用的搭配資源。
常見陷阱與快速修正
最常見的錯誤是忘了讓旋轉指示器元素呈完美正方形。一個寬 48 像素、高 50 像素的元素會渲染成橢圓形環,旋轉時會明顯晃動,因為旋轉圍繞方框中心,而較長的軸會吸引目光。修正方法是明確設定寬與高,或使用 aspect-ratio: 1,讓方框無論宣告寬度為何都保持正方形。第二個陷阱是對不可變形的屬性執行動畫,這會導致瀏覽器在每一幀重繪整個元素,在筆電和手機上會耗電。請在關鍵影格中使用 transform: rotate(...),而不是為邊框顏色或尺寸執行動畫;transform 是 GPU 加速的,即使在低階硬體上也能保持流暢。
另一個常見問題是工作完成後旋轉指示器仍然可見,因為例外在清理程式碼執行前就丟出來了。將可見性變更包進 finally 子句,或放進一個成功與錯誤路徑都會更新的專屬載入狀態存放區,就能避免卡住的旋轉指示器狀態。最後,不要在單一容器中堆疊多個旋轉指示器,因為它們的旋轉可能會逐漸失同步,在某些幀率下產生閃爍效果。每個邏輯任務用單一旋轉指示器比用多個小旋轉指示器更清晰,而且一致性也幫助使用者判斷頁面確實在執行工作。
Quick Reference
| Property | Recommended Range | Why |
|---|---|---|
| Size (width and height) | 16 px to 128 px | Covers inline icons through full-page loaders without clipping. |
| Ring width (border) | 2 px to 12 px | Stays visibly smaller than half the box so the inner circle remains. |
| Duration | 0.6 s to 2.0 s | Fast enough to feel responsive, slow enough to read as motion. |
| Active vs track contrast | Visible pair, not monochrome | A single color for both borders hides the active segment. |
| Animation property | transform: rotate | GPU-accelerated and stays smooth on low-end devices. |
| Fallback for reduced motion | prefers-reduced-motion block | Required for users with motion sensitivity. |
If you're weighing options, Create CSS Speech Bubbles Without Images or JavaScript covers this in detail.