CSS 載入動畫產生器
免費 CSS 載入動畫產生器：十種純 CSS 載入圖示，即時調整尺寸、速度、粗細與顏色，一鍵複製即貼即用的 HTML 與 CSS 程式碼。
CSS 載入動畫產生器會產生什麼？
它用純 CSS 建構載入指示動畫：旋轉環、圓點、直條、漣漪、脈衝、軌道、翻轉、波浪、彈跳和漸層圓環十種。每種都依你選擇的尺寸、速度、粗細與顏色產生，可直接複製 HTML 加 CSS 使用。
載入動畫需要 JavaScript 或圖片嗎？
不需要。每個載入動畫都是一般 HTML 元素加 CSS 關鍵影格動畫，沒有圖片、圖示字型、相依函式庫，也不需要任何執行階段腳本——只要那段 CSS 就夠了。
怎麼把載入動畫加到網站上？
在網格中點選某個動畫，然後把 HTML 區塊複製到頁面中需要顯示的位置，再把 CSS 區塊貼進樣式表。CSS 完全自包含，已包含所需的 @keyframes 規則。
四個參數分別控制什麼？
「尺寸」控制所有動畫的寬高，「速度」改變動畫時長，「粗細」影響邊框和直條寬度，「顏色」會即時重繪整個網格和程式碼輸出中的所有元素。
複製過去的動畫為什麼不會動？
最常見原因是只複製了類別規則而沒有複製 @keyframes 區塊，或者改了 HTML 裡的類別名卻沒改 CSS。按產生結果同時複製兩段程式碼，並保持類別名不變即可。
這些動畫效能如何？
很好。所有動畫只改變 transform 和 opacity，瀏覽器可以在 GPU 上合成，不觸發版面配置和重繪，同一頁面放多個動畫也能保持流暢。
載入動畫對無障礙友善嗎？
載入圖示屬於視覺裝飾，螢幕閱讀器需要文字提示。可以在動畫附近加一個視覺隱藏的「載入中」文字，或幫動畫加上 aria-hidden="true" 並另行播報進度。
資料會上傳到伺服器嗎？
不會。產生器完全在瀏覽器中執行，你的設定不會離開頁面，產生的程式碼也在本機裝置上組裝。
如何使用CSS 載入動畫產生器
CSS 載入動畫產生器用純 CSS 建構動畫載入圖示——不用圖片、不用 JavaScript、零相依。十種樣式任選，即時調整尺寸、速度、粗細與顏色，然後把產生的 HTML 和 CSS 直接複製進你的專案。
- 用四個控制項調整全域參數：「尺寸」決定每個載入器的盒子大小，「速度」改變動畫時長，「粗細」控制邊框與豎條寬度，「顏色」替所有元素上色。
- 在網格中瀏覽：十種載入器都會按目前設定即時動畫，方便一目了然地比較。點擊任意載入器即可選取。
- 詳情面板會放大顯示選取的載入器，並給出對應的 HTML 片段與完整 CSS（包含所需的 @keyframes）。
- 按「複製 HTML」或「複製 CSS」分別把兩段程式碼送入剪貼簿。CSS 完全自包含，貼進樣式表，再把 HTML 放到需要顯示載入器的位置即可。
- 修改任意參數，網格、詳情預覽與兩段程式碼都會即時更新。
純 CSS 載入器幾乎沒有頻寬開銷，在任何螢幕上都不會模糊。為了無障礙建議搭配一段文字說明；動畫時長別低於約 0.5 秒——閃得太快的載入圖示讓人焦慮而不是安心。
相關工具
- CSS壓縮器 免費線上CSS壓縮工具。即時壓縮和最佳化CSS程式碼，移除空白、註解和多餘字元。減小檔案體積，提升網頁載入速度。
- CSS格式化工具 即時格式化和美化CSS程式碼，將壓縮的CSS轉換為可讀的、縮排良好的程式碼，支援自訂選項。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。
- CSS clip-path 裁剪產生器 免費線上 CSS clip-path 產生器。支援 polygon、circle、ellipse、inset 四種模式，頂點可拖曳，即時預覽並一鍵複製 CSS 程式碼。
- CSS圓角產生器 視覺化CSS圓角產生器，獨立調整每個角的圓角半徑，即時預覽並立即複製產生的CSS程式碼。