Multi-Step Loader (多步驟載入)
別稱 Step loader, Checklist loader
長任務推進時，步驟清單逐項醒目標示或打勾。
適用情境
AI 生成、新手導覽中的處理
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「多步驟載入」(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步驟由上而下逐一亮起，每完成一步就彈出一個小勾勾，節奏平穩、方便閱讀。
依照任務的實際進度推進步驟，而不是用固定計時器，並向螢幕閱讀器播報每個已完成的步驟。相似的動效
Success Checkmark (成功打勾)
別稱 Animated success tick
圓圈和勾號自行畫出，確認操作已成功。
適用情境
表單送出、付款完成
在[套用位置]加入「成功打勾」(Success Checkmark) 動畫，也叫 animated success tick。
先用一筆流暢的線條畫出圓圈，接著在圓圈內畫出勾號，整個圖示再輕輕彈一下：沉穩、篤定。
操作成功時只播放一次，搭配螢幕閱讀器能唸出的文字訊息；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的圖示。點擊試試
Checkbox Check Draw (核取方塊打勾)
別稱 Animated checkbox, Checkmark draw
勾選時，方塊內的勾號一筆一筆地畫出來。
適用情境
表單、待辦清單
在[套用位置]加入「核取方塊打勾」(Checkbox Check Draw) 動畫，也叫動畫核取方塊 (animated checkbox) 或勾號繪製 (checkmark draw)。
勾選時，方塊填滿顏色，勾號以一筆快速流暢的線條自己畫出來；取消勾選時以同樣方式擦除。
保持它是帶有勾選狀態的真正核取方塊，可以用鍵盤操作，並有清楚可見的焦點框。Loading & Progress 中的其他動效
Progress Ring (環形進度條)
別稱 Circular progress, Radial progress, Animated Circular Progress Bar
圓弧沿著圓環延伸，顯示完成的百分比。
適用情境
檔案上傳、目標、計時器
在[套用位置]加入「環形進度條」(Progress Ring)，也叫 circular progress 或 radial progress。
圓弧從頂端開始沿圓環順時針延伸，顯示完成的百分比，停下時緩緩減速，同時中間的數字跟著遞增。
讓圓弧和數字保持同步，並用正確的進度條語意向螢幕閱讀器提供數值。Pulse Placeholder (佔位脈動)
別稱 Skeleton pulse, placeholder-glow
灰色佔位區塊柔和地明暗變化，提示內容正在載入。
適用情境
骨架畫面
在[套用位置]加入「佔位脈動」(Pulse Placeholder)，也叫 skeleton pulse。
和即將出現的內容形狀一致的灰色佔位區塊一起緩慢變亮再恢復，節奏柔和、平穩。
佔位區塊要與實際版面一致，內容載入時不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。Skeleton Shimmer (骨架微光)
別稱 Skeleton wave, Shimmer effect, placeholder-wave
一道亮光掃過灰色佔位圖形。
適用情境
內容載入佔位
在[套用位置]加入「骨架微光」(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光帶由左往右掃過灰色佔位圖形，下一次掃過前稍微停頓：流暢、不疾不徐。
佔位圖形要與實際版面一致，內容載入時不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示靜態佔位。