Progress Ring (環形進度條)
別稱 Circular progress, Radial progress, Animated Circular Progress Bar
圓弧沿著圓環延伸，顯示完成的百分比。
適用情境
檔案上傳、目標、計時器
變體
- determinate
- indeterminate
- stroke-dashoffset
- conic-gradient
- counting label
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「環形進度條」(Progress Ring)，也叫 circular progress 或 radial progress。
圓弧從頂端開始沿圓環順時針延伸，顯示完成的百分比，停下時緩緩減速，同時中間的數字跟著遞增。
讓圓弧和數字保持同步，並用正確的進度條語意向螢幕閱讀器提供數值。相似的動效
Donut Chart Fill (環圈圖填充)
別稱 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
環圈或圓餅圖依順時針方向填滿到對應的百分比。
適用情境
占比構成展示
在[套用位置]加入「環圈圖填充」(Donut Chart Fill) 動畫，也叫 pie chart sweep 或 animated donut chart。
從頂端開始，各段依序順時針掃出，直到環圈顯示出各自的占比，結束時平順減速。
圖表進入畫面時只播放一次，並以文字形式提供實際數值給螢幕閱讀器。Circular Spinner (圓形載入圈)
別稱 Spinner, Throbber, Circular indeterminate
圓環或圓弧持續旋轉，表示正在載入。
適用情境
按鈕、頁面載入
在[套用位置]加入「圓形載入圈」(Circular Spinner)，也叫 spinner 或 throbber。
一段圓弧沿著淺色圓環等速旋轉，同時不斷伸長又縮短，流暢而連續。
旋轉要無縫銜接，並為螢幕閱讀器提供載入標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就放慢或停止旋轉。Determinate Progress Bar (確定進度條)
別稱 Progress bar fill, Progress Indicator, Progress bar, Circular progress
進度條依任務完成比例由左往右填滿。
適用情境
檔案上傳、多步驟表單
在[套用位置]加入「確定進度條」(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
進度條隨實際進度由左往右填滿，每次更新之間平順過渡，並在旁邊顯示百分比。
使用含目前值、最小值和最大值的正確進度條語意，讓螢幕閱讀器能讀出進度，而且填充絕不能倒退。在裡面捲動
Scroll Progress Indicator (捲動進度指示器)
別稱 Reading Progress Bar, Progress Bar
隨著使用者捲動頁面或文章，進度條或圓環逐漸填滿。
適用情境
文章、長頁面
在[套用位置]加入「捲動進度指示器」(Scroll Progress Indicator)，也叫閱讀進度條 (reading progress bar)。
頂端的一條細條要隨著讀者捲動的距離從左往右填滿，到結尾時佔滿整個寬度。
直接綁定捲動位置，不要有緩動延遲，也不要遮住內容。Loading & 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)，就顯示靜態佔位。Top Loading Bar (頂部載入條)
別稱 Page progress bar, NProgress
頁面頂端的細條在換頁過程中緩慢前進，載入完成時走完全程。
適用情境
SPA 路由載入
在[套用位置]加入「頂部載入條」(Top Loading Bar)，也叫 page progress bar。
頁面載入時，頂端邊緣的細條先快速往前衝，接著越走越慢；載入完成後迅速衝到盡頭並淡出。
在載入真正完成之前絕不能走到盡頭，也不要遮住或推移頁面內容。