CSS Loader on Steam Deck 通常指的是以下兩種之一：SDH-CssLoader 外掛，可在 Steam Deck 的遊戲介面中動態載入 CSS 佈景主題；或是純 CSS 的載入旋轉動畫，用於在內容載入時表示進度。外掛路徑需要以 Decky Loader 作為外掛主機，接著從其商店將 CSS Loader 加入為受管理的外掛，最後將佈景主題檔案放入 Deck 可讀取的資料夾中。旋轉動畫路徑則完全在瀏覽器中執行，透過 CSS Loader Generator，從幾個數值輸入和一對十六進位顏色建立出完整的環形旋轉動畫樣式表，再回傳一個 class 與一段 keyframe 區塊，可貼到任何樣式表中。這兩種路徑都不需要安裝 JavaScript 動畫函式庫或圖片素材，且都依賴標準的 CSS 動畫，除了在基於 Chromium 的 SteamOS 桌面環境中可運作，也能在所有現代裝置的一般瀏覽器中執行。
「CSS Loader on Steam Deck」通常的含意
當使用者在搜尋框中輸入「CSS Loader on Steam Deck」時，他們幾乎總是在找以下兩種之一。第一種，也是較常見的，是由 DeckThemes 維護的 SDH-CssLoader 外掛，會將使用者撰寫的 CSS 注入到 Steam Deck 的遊戲介面中，讓使用者能重新設定選單、覆蓋層和資料庫卡片的外觀。第二種是通用的 CSS 環形旋轉動畫，也就是網站和網頁檢視中常見的「載入中」指示器，使用者想將其加入自訂佈景主題、網站，或是在 Deck 上執行的桌面覆蓋層中。
這兩種路徑共享一個名稱和一些 CSS 概念，但它們解決的問題不同。外掛路徑會修改 Steam Deck 的介面呈現層，需要修改過的 SteamOS 安裝或 Decky Loader。旋轉動畫路徑則是開發者工具：設定尺寸與顏色，複製產生的 CSS，再貼到任何樣式表中。本指南會逐步說明這兩種方式，讓你能根據實際任務選擇合適的方案，並展示產生的 CSS 如何也能存在於 Steam Deck 佈景主題檔案中。
在 Steam Deck 上安裝 CSS Loader 外掛
若要在 Steam Deck 上安裝 SDH-CssLoader 外掛，你需要先讓 Decky Loader 執行。Decky Loader 是 Steam Deck 的外掛載入器，會提供一個快速存取選單，安裝的外掛就會放在那裡。一旦 Decky 安裝到裝置上，CSS Loader 外掛可以直接從其內建商店新增，無需手動下載。
- 在 Steam Deck 上，按下 Steam 鍵，選擇「電源」，然後切換到桌面模式。
- 開啟瀏覽器，依照 SteamOS 適用的官方 Decky Loader 安裝說明進行安裝；安裝程式會部署一個可在重開機後存活的服務。
- 返回遊戲模式，按下三點快速存取按鈕。你應該會看到一個新的 Decky 圖示（一個小插頭）。
- 開啟 Decky 選單，瀏覽到商店（購物袋圖示），搜尋 DeckThemes 的「CSS Loader」。
- 從商店安裝 CSS Loader，並等待外掛載入完成 — 完成時會看到通知。
- 在 CSS Loader 的設定分頁中，將外掛指向一個佈景主題資料夾；預設路徑位於你的家目錄中，並會在首次啟動時建立。
- 下載或撰寫一個佈景主題，將 .css 檔案放入該佈景主題資料夾，然後在快速存取中的 CSS Loader 選單裡啟用該佈景主題。
如果你想發布自訂佈景主題，放入該資料夾的 CSS 檔案可以包含任何你想要的 CSS — 包括在本機產生的一小段旋轉動畫區塊 — 外掛會在下一次重新整理時將其套用至遊戲介面。佈景主題也可以從社群儲存庫取得，例如 GitHub 上的 Steam Deck 佈景主題合集，該專案提供可直接套用於 SDH-CssLoader 的樣式表。
使用視覺化工具產生 CSS Loader 旋轉動畫
若要獲得可貼到任何位置（包括貼入自訂 Steam Deck 佈景主題）的純 CSS 載入旋轉動畫，CSS Loader Generator 會將少數輸入轉換成完整的旋轉動畫宣告。這個產生器完全在瀏覽器中執行，不會上傳任何東西，最後會輸出一個 class 和一段具唯一名稱的 keyframe 區塊，可直接用於樣式表。
- 選擇旋轉動畫的尺寸和環寬；尺寸決定外圍方形容器的大小（將成為環形），環寬則控制邊框的粗細。
- 設定對比明顯的 active 和 track 顏色；track 顏色繪製整個邊框，而 active 顏色會透過 border-top-color 取代其中一個區段。
- 邊觀察即時旋轉邊調整持續時間；預覽就是產生的 CSS 實際對應的元素，因此時間設定與輸出完全一致。
- 複製 CSS，貼到樣式表中，若你的程式碼已有相同識別名稱，請重新命名 class 或 keyframes。
- 將 loader 包在一個帶有 role="status" 且 aria-label 符合實際任務的元素中，例如「Loading results」或「Uploading file」。
- 加入一條 prefers-reduced-motion 規則，依據你的無障礙原則減速、簡化或取代旋轉動畫。
產生器的輸出是一個 .loader class 加上一段具唯一名稱的 @keyframes 規則，會將元素旋轉 360 度，使用 animation 簡寫套用，採用 linear 計時函式並設為 infinite 重複。由於幾何結構完全使用 CSS，環形在不同的像素密度下都能保持銳利，且不依賴點陣圖、SVG 檔案或 JavaScript 動畫迴圈。
CSS Loader 輸入範圍與產生器會拒絕的值
產生器設有嚴格的限制，以確保預覽不會變成無法使用的形狀。下表列出每個輸入、允許的範圍以及設定上下界的原因。
| 輸入 | 允許範圍 | 設定上下界的原因 |
|---|---|---|
| 尺寸 (px) | 12–160 | 低於 12 時環形會變成一個點；高於 160 時則不再像個小型的狀態指示器。 |
| 環寬 (px) | ≥ 1, ≤ size / 2 | 若環寬超過尺寸的一半，內部開口會塌陷而不再像個清楚的環。 |
| 持續時間 (s) | 0.2–5 | 低於 0.2 秒的動畫會令人不適；超過 5 秒則看起來像靜止不動。 |
| Active 顏色 | 六位數十六進位（例如 #1f6feb） | 強制使用嚴格的格式，以確保對比和主題套用的一致性。 |
| Track 顏色 | 六位數十六進位 | 原因同 active 顏色。 |
空白的數值欄位會被視為無效，而非默默變成零；非有限值（non-finite values）會直接遭到拒絕。如果你需要不同的格式 — 例如具名顏色、rgba 值或 CSS 變數 — 請將複製的區塊貼到編輯器中，於產生後手動調整數值。
無障礙設計、減少動畫與狀態文字
載入動畫僅是視覺回饋；正式環境中的元素仍需要一個無障礙名稱或鄰近的狀態文字，說明正在發生什麼事。預覽已經使用 role="status" 並搭配 aria-label，但你的實作應符合實際任務。搜尋畫面使用「Loading results」、檔案傳輸時使用「Uploading file」、儲存動作使用「Saving changes」。不要反覆宣告快速且細微的更新 — 若進度可量化，使用帶有 value 屬性的進度條通常比不確定的旋轉動畫提供更多資訊。
持續旋轉的動畫應尊重使用者的減少動畫偏好。MDN 上關於 使用 CSS 動畫 的指南，以及 W3C CSS 動畫規範，都說明了媒體查詢如何覆寫或移除動畫。常見的正式環境規則包括：
- 使用 @media (prefers-reduced-motion: reduce) 來減速、簡化或取代動畫。
- 預留版面空間，讓旋轉動畫出現或消失時不會造成內容跳動。
- 在出貨前測試高對比、強制色彩、深色主題、縮放以及小螢幕的顯示效果。
- 絕不使用動畫來隱藏失敗或停滯的操作 — 應顯示逾時、取消、重試和錯誤狀態。
如果同一個旋轉動畫出現在 Steam Deck 佈景主題檔案中，相同的無障礙規則也適用：在標記中保留 role 和 label，再由佈景主題的 CSS 處理動畫。同時顯示過多旋轉動畫會消耗資源並造成視覺雜訊，因此請只在需要回饋的地方渲染，並在操作完成時立即移除 loader。
使用真實的載入狀態測試 Loader
複製下來的基準刻意設計得簡單，方便你擴充。若你的樣式表已使用相同識別名稱，請重新命名 class 或 keyframes，然後補上產生器未提供的周邊應用邏輯：覆蓋層定位、模態行為、骨架內容以及進度計算，這些都屬於 CSS 之外的範疇。請以實際的網路延遲來渲染 loader，而不只是永久的示範動畫，並確認它在成功、取消或錯誤發生後都能可靠地消失。
產生器並未加入 JavaScript 狀態管理，因此請將旋轉動畫綁定到真實條件 — 例如 fetch 承諾、檔案上傳或 Steam Deck 外掛重新載入 — 並確認在工作完成時將其移除。在 SteamOS 中測試時，請開啟桌面瀏覽器工作階段，貼上相同的 CSS，並確認旋轉以要求的持續時間執行。如果你打算將旋轉動畫嵌入 SDH-CssLoader 佈景主題中，請將區塊放入佈景主題的主要樣式表，並從快速存取選單中重新載入佈景主題，以確認視覺結果與預覽一致。
若你正在權衡各種方案，用於有界幾何的 CSS Neumorphism 產生器替代方案 有詳細說明。
若你正在權衡各種方案，用於純 CSS 對話框尾巴的 CSS 對話氣泡產生器替代方案 有詳細說明。