任務路徑 / 從輸入到結果
如何設計 CSS 載入動畫
- 01
選擇載入器樣式
開啟「載入器樣式」，選「軌道圓環」得到經典的旋轉圓環，或選「三點」得到跳動的三點組合。即時預覽會隨你的每次修改立即動起來。
- 02
設定框架與描邊尺寸
畫布支援 24–160 px，描邊或圓點支援 2–20 px。圓環描邊必須小於畫布的一半；三個圓點及至少 2 px 的間距必須放得下，否則停用複製與下載。圓環匯出尺寸包含邊框。
- 03
調整速度與顏色
把「循環時長」選在 0.2 到 4 秒之間。「作用中顏色」用於圓環上邊框或中間圓點；「軌道顏色」用於圓環其餘邊框或兩側圓點。
- 04
或從範例開始
按「載入範例」套用一套醒目的三點預設——72 px 外框、12 px 圓點、0.75 s 週期的紅黃配色——作為起點。「重設」隨時回到預設的軌道圓環。
- 05
複製或下載 CSS
點「複製 CSS」把整段規則放進剪貼簿，或點「下載 .css」儲存 toolars-loader.css。輸出自帶 @keyframes，以及一段在 prefers-reduced-motion 下停止動畫的媒體查詢。
- 06
接入你的標記
軌道圓環只需要一個帶 .loader 類別的元素；三點樣式需要它內部有三個 span 子元素。匯出內容包含 prefers-reduced-motion 區塊，會為對動畫敏感的訪客停止動畫。