由 CSS Loader Generator 產生的純 CSS 環形旋轉圖示，是一個寬高相等的正方形元素，使用完整的圓形 border-radius、以單一顏色填滿整個邊框作為軌道顏色，並透過 border-top-color 覆寫其中一段以呈現活動顏色。產生器會輸出兩個簡短的 CSS 區塊：一個 .loader 類別，帶有即時預覽所使用的所有視覺屬性；以及一個命名唯一的 @keyframes 規則，使用線性、無限循環的動畫宣告，將元素旋轉 360 度。不需要 SVG 檔案、GIF、圖片素材，也不需要 JavaScript 動畫迴圈；由於所有內容都由瀏覽器的 CSS 渲染器繪製，因此在任何像素密度下都能保持清晰的幾何形狀，而執行階段的成本僅僅是每幀一次的 transform 運算。CSS Loader Generator讓您透過有範圍限制的數值輸入和嚴格的 6 位數十六進制顏色，設定尺寸、環形寬度、軌道顏色、活動顏色和持續時間，然後複製一份可直接放入任何樣式表的基準程式碼。預覽本身也不是模擬圖；它就是實際的狀態元素，使用與輸出內容相同的尺寸、邊框、顏色和時間設定。
產生器所建構的內容
產生器只公開最少且實用的控制項，拒絕做任何多餘的事。每個控制項都對應到 .loader 規則上的單一 CSS 屬性，而即時預覽就是帶有相同尺寸、邊框、顏色和時間設定的同一個元素，當您複製時，這些值會被序列化輸出。這就是為什麼預覽可以作為可信賴的尺寸參考：如果在預覽中看起來正確，在實際環境中也會看起來一樣（周圍的主題除外）。
五個控制項，不多不少。Size 以像素設定方塊的寬度和高度。Ring width 設定方塊的 border-width。Track color 設定 border-color，這是填滿整個環形較暗淡的色調。Active color 設定 border-top-color，這是沿著環形邊緣移動的較亮區段。Duration 則用於動畫簡寫。其他所有項目，包括 border-style: solid、border-radius: 50%、animation-timing-function: linear 和 animation-iteration-count: infinite，都由產生器固定，以確保輸出在各種瀏覽器間可預期且可重現。
這項技術刻意保持輕量。一個寬高相等的正方形方塊，當 border-radius 達到百分之五十時就會變成圓形。以單一顏色填滿整個邊框，再以另一個顏色覆寫其中一邊，就能在不使用任何遮罩、漸層或偽元素的情況下，營造出旋轉弧線的錯覺。一個單純將方塊旋轉到 360 度的關鍵影格，就能用一個屬性達到無限旋轉的效果。由於只有 transform 相關屬性會被製作動畫，瀏覽器可以將旋轉交由合成器處理，避免每幀都重新進行版面配置與繪製。
輸入速查表
數值輸入與顏色都受到嚴格的範圍保護。空白欄位會被視為無效值，而不是靜默地強制轉為零；非有限值會直接被拒絕，因此預覽絕不會因為打錯字而呈現出破損的版面配置。下表摘要列出產生器所接受之每個輸入的操作範圍，以及它在輸出 CSS 中所驅動的屬性。
| 輸入 | 輸出 CSS 屬性 | 格式 | 最小值 | 最大值 | 備註 |
|---|---|---|---|---|---|
| Size | width, height | 整數像素 | 12 | 160 | 相等的邊長可讓環形保持置中 |
| Ring width | border-width | 整數像素 | 1 | size / 2 | 超過尺寸的一半，可見的開孔會塌陷 |
| Duration | animation-duration | 十進位秒數 | 0.2 | 5 | 低於 0.2 秒會顯得顫抖；高於 5 秒會看起來像靜止 |
| Track color | border-color | 6 位數十六進制 | 不適用 | 不適用 | 填滿整個環形 |
| Active color | border-top-color | 6 位數十六進制 | 不適用 | 不適用 | 覆寫環形的一段 |
如果您需要的數值超出這些範圍，請直接編輯複製出來的 CSS，而不是嘗試繞過表單。設定範圍是因為幾何形狀只有在這個範圍內才會表現得像環形：邊框厚度一旦超過方塊最短邊的一半，視覺中心就會反轉，無法再呈現清晰的開孔；而持續時間若落在 0.2–5 秒的視窗之外，不是讓人感到不適，就是看起來卡住。嚴格的 6 位數十六進制格式是為了讓產生器可以序列化出也能在預覽中渲染的顏色，包括在深色主題中，因為短形式的 3 位數十六進制和具名顏色可能會產生細微的不一致。
在產生器中建立環形旋轉圖示
以下的步驟涵蓋了工具內的整個流程，從挑選比例到複製可用的基準程式碼。請將預覽視為唯一的真實依據：由於數值會原封不動地傳遞到輸出 CSS 中，在預覽中看起來正確的樣子，在您的樣式表中也會看起來一樣。
- 挑選一個與周圍版面配置相符的尺寸。先決定環形寬度，這樣才能看出活動區段的粗細應該多厚，接著調整方塊大小，讓環形寬度保持在邊長的一半以下；舉例來說，一個 48 像素的方塊搭配 6 像素的環形寬度，可保留 36 像素的內部開孔，在小螢幕上看起來依然是一個清晰的洞。
- 挑選一組對比明顯的顏色。軌道使用較柔和的色調，活動區段則使用較鮮豔的色調。請在產品中最淺與最深的表面上測試這兩種顏色，因為同一組顏色在深色主題中可能看起來對比不足，即使在淺色主題中顯然可以區分。
- 一邊觀察即時旋轉一邊設定持續時間。調整滑桿直到旋轉感覺是傳達資訊而非讓人分心；通常耗時一兩秒的操作，搭配 1 秒的旋轉效果不錯，而長時間執行的背景工作，則適合搭配較慢的 1.5–2 秒旋轉，以減少對觀看者注意力的吸引。
- 複製 CSS，將其貼到您的樣式表中，並重新命名 .loader 類別和 @keyframes 規則（如果您的樣式表已定義過相同的識別名稱）；產生器不會偵測命名衝突。
複製的 CSS 解析
輸出內容刻意保持簡短。它只包含預覽所呈現的內容，外加一個在大多數樣式表中都能安全使用的唯一關鍵影格規則。這兩個區塊合在一起構成了一份基準，您可以在不重寫幾何設定的情況下加以擴充。
| 區塊 | 選擇器 | 用途 |
|---|---|---|
| 樣式規則 | .loader | 帶有尺寸、環形寬度、兩種顏色以及動畫簡寫 |
| 關鍵影格 | (命名唯一) | 將元素從 0 度旋轉到 360 度 |
動畫簡寫是由您設定的持續時間，加上固定的線性計時函數和無限迭代次數所組合而成。如果您需要不同的視覺節奏，可以將 border-top-color 換成 border-right-color 或 border-left-color，將活動區段在環形邊緣上移動位置；或是將 border-style 改為 dashed，以呈現不同的質感，而無需更動幾何設定。若要產生多個不同尺寸的旋轉圖示，請複製 .loader 規則並使用不同的類別名稱，再調整尺寸和環形寬度；這兩個區塊可以共用同一個關鍵影格規則，因為旋轉就是旋轉。
將旋轉圖示轉化為實際的載入狀態
旋轉圖示只有在正確的時機出現、搭配正確的文字、並在完成時消失，才真正有用。產生器不會為您管理狀態；這個責任屬於周圍的應用程式，而基準輸出應被包裝在一個容器中，於請求開始時掛載 .loader 元素，並在請求完成、失敗或逾時時將其移除。
請使用一個穩定的容器，在旋轉圖示掛載之前先預留空間，這樣當元素出現或消失時，其餘版面配置就不會產生位移。如果可以衡量操作的進度，建議使用帶有數值的進度條，而非不確定的旋轉圖示；旋轉圖示最適合用於無法追蹤進度的工作。絕對不要讓動畫載入圖示取代失敗狀態：請明確提供逾時設定、取消控制項、重試按鈕和文字錯誤訊息，讓使用者隨時知道該操作仍在執行還是已經停滯。
實際上，這代表複製的 .loader 類別應被視為一個末端視覺元件，而非完整的載入 UI。應用程式負責決定何時掛載該元素、何時將其換成結果、以及何時將其取代為錯誤狀態。預覽只能驗證視覺本身看起來是否正確；它無法驗證載入狀態是否具備任何生命週期。
無障礙設計與減少動態效果
無障礙設計並不包含在複製的基準程式碼中，因為每個產品都有自己的政策。請為每個實際使用的旋轉圖示加入三項要素：有意義的無障礙名稱、用於禮貌地宣告變更的狀態區域，以及尊重使用者偏好的減少動態效果覆寫。
即時預覽使用 role="status" 和通用的 aria-label，以便讓輔助技術能宣告此元素。請將該標籤替換為任務專用的詞彙，例如「載入搜尋結果中」或「上傳檔案中」，讓螢幕閱讀器使用者能聽到實際發生的事情。請勿宣告快速且小幅的更新；具有穩定文字的 aria-live="polite" 區域通常就足夠，而「assertive」則應保留給使用者必須立即採取行動的訊息。
持續旋轉可能會對某些使用者引發前庭不適。請加入一個 @media (prefers-reduced-motion: reduce) 區塊，暫停動畫、大幅降低速度，或將旋轉元素替換為靜態指示器。W3C CSS Animations Level 1 規範定義了 animation-name、animation-duration 和 animation-iteration-count 在此媒體查詢中的行為方式，而MDN 的 Using CSS animations 指南則透過實作範例逐步說明相同的模式。在出貨前，請在強制色彩模式、深色主題、瀏覽器縮放和小尺寸視窗下測試同一條規則。
效能與生命週期規則
單一環形旋轉載入指示器的成本很低，因為 transform: rotate() 可由瀏覽器進行合成，不會在每一幀都觸發版面配置或繪製。許多同時運作的旋轉指示器仍會耗用 CPU 並產生視覺雜訊，因此請僅在實際需要回饋的地方呈現該元素，並在操作完成時立即將其移除。
請針對真實的網路延遲來測試載入指示器，而不僅只是用永久的展示迴圈。確認該元素會在成功、取消與錯誤時消失，並確認在使用者離開頁面時它不會殘留。如果你的樣式表已經定義了 .loader class 或 @keyframes 識別碼，請重新命名，因為產生器不會偵測命名衝突。如果你需要在同一個專案中使用多個不同大小或顏色的旋轉指示器，請以不同的 class 名稱重複複製該規則，並依照各別實例調整尺寸與環的粗細。
所有產生作業都在瀏覽器中本機完成:設定不會被上傳、不需要帳號，也不會為你的專案新增任何相依套件。請將複製的基準當作起點，然後在上層加入有意義的狀態文字、減少動效果行為、失敗處理以及生命週期邏輯，再進行發佈。
如果你正在權衡選項，CSS 對話泡泡產生器:命令列與線上工具的比較對此有詳細說明。
如果你正在權衡選項，CSS 條紋產生器速查表:角度、寬度與輸出對此有詳細說明。