跳至主要內容
Lizely

CSS 載入指示器生成器

產生一個輕量級的 CSS 圓形旋轉指示器，具有限定大小、寬度、顏色與持續時間，並提供可訪問性實作指南。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇指示器的大小與環的寬度。
  2. 2.設定活動與軌道的對比色彩。
  3. 3.觀看即時旋轉時，可調整持續時間。
  4. 4.複製 CSS，接著加入狀態文字、減少動畫規則以及實際的載入狀態邏輯。

關於CSS 載入指示器生成器

CSS 載入指示器生成器會根據標準邊框與關鍵幀旋轉，建立一個緊湊的環形旋轉指示器。設定整體大小、環寬、活動顏色、軌道顏色與動畫持續時間。預覽為一個真實的狀態元件，使用相同的尺寸、邊框、顏色與時間值，與複製的 CSS 一致。輸出包含一個 .loader 類別與一個獨特命名的 @keyframes 規則，讓你可直接將其貼入樣式表中，無需圖片、SVG 檔案、JavaScript 動畫迴圈或第三方套件。

此視覺技術刻意簡單。等寬等高形成一個方框。圓形的 border-radius 會將方框轉為環形。整個邊框使用軌道顏色，而 border-top-color 則取代一段為活動顏色。關鍵幀會讓元素旋轉三百六十度，動畫簡寫則套用所選的持續時間、線性時間軸與無限重複。由於其幾何結構為 CSS 而非點陣圖資源，因此在不同像素密度下仍保持清晰。

輸入的限制值會保護預覽不使用無效的引數。大小限制為十二至一百六十像素。環寬不得少於一像素，且不得超過所選大小的一半，否則內部開口將會坍縮。持續時間接受 0.2 至 5 秒之間的值；過快的移動可能令人不適，過慢的移動則可能看起來像是停滯。顏色必須為六位元組的十六進位值。空的數值欄位會變為無效，而非靜默轉為零，非有限值將被拒絕。

載入動畫僅提供視覺反饋。實際操作需要一個可訪問的名稱或附近狀態文字來說明當前狀態。預覽使用 role=status 與 aria-label，但你的實作應與實際任務相符，例如「載入結果」或「上傳檔案」。請勿反覆宣告快速的微小更新。若進度可測量，通常使用帶有值的進度條會比無確定性的旋轉更有效。絕不可使用動畫來隱藏失敗或卡住的運作；應公開顯示逾時、取消、重試與錯誤狀態。

連續旋轉應尊重減少動畫偏好。複製的基準設定刻意簡單，因此建議加入 @media (prefers-reduced-motion: reduce) 規則，根據產品的可訪問性政策來減緩或取代動畫。同時也應測試高對比、強制顏色、深色主題、縮放與小螢幕情境。活動與軌道顏色需有足夠的區別，但旋轉指示器不應是使用者學習內容正在載入的唯一方式。請保留空間，以免顯示或隱藏時造成佈局移動。

動畫表現通常良好，因為 transform 旋轉可以高效疊合，但多個同時運作的旋轉仍可能產生視覺雜訊並消耗資源。僅在需要反饋時才渲染，並在操作完成後立即移除指示器。此生成器不會加入 JavaScript 狀態管理、疊層定位、對話方塊行為、骨架內容或進度計算。這些決策應由應用程式周圍的邏輯負責。若你的樣式表已使用相同識別字元，請改用其他名稱。

所有操作皆在瀏覽器本機進行。設定不會上傳或保留，無需帳號，也無新增依賴。使用預覽確認尺寸與時間，複製 CSS 後，再加入具意義的狀態文字、減少動畫行為、失敗處理與生命週期邏輯。請以實際網路延遲測試載入指示器，而非僅使用永久的範例動畫，並確認其在成功、取消或錯誤後能確實消失。

方法與來源

驗證有限且有限的尺寸、環寬、持續時間以及十六進位顏色；序列化具有獨特頂端段的圓形邊框；並產生用於即時預覽的線性無限轉換關鍵幀。

常見問題

這個產生的旋轉圖示本身是否具有可訪問性？
沒有。應加入具意義的可訪問性名稱或鄰近的狀態文字，並在有提供時使用測量進度。
如何處理減少動畫的狀況？
加入偏好減少動畫的規則，根據產品政策，減緩、簡化或取代連續旋轉。
為何環的寬度限制為半徑大小？
較厚的邊框會導致邊界坍縮或反轉可見的內部開口，進而失去像清晰環的行為。

相關工具

開發者工具 使用指南

查看全部