Circular Spinner (圓形載入圈)
別稱 Spinner, Throbber, Circular indeterminate
圓環或圓弧持續旋轉，表示正在載入。
適用情境
按鈕、頁面載入
變體
- border spinner
- dashed arc
- dual ring
- orbit dots
- infinity loop
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「圓形載入圈」(Circular Spinner)，也叫 spinner 或 throbber。
一段圓弧沿著淺色圓環等速旋轉，同時不斷伸長又縮短，流暢而連續。
旋轉要無縫銜接，並為螢幕閱讀器提供載入標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就放慢或停止旋轉。相似的動效
Spin (持續旋轉)
別稱 Rotate Loop, Spinner
元素以固定速度持續旋轉。
適用情境
載入中的旋轉指示器
在[套用位置]加入「持續旋轉」(Spin) 效果，也叫 spinner 或 rotate loop。
元素要以固定、均勻的速度持續旋轉，每圈之間不要有緩動。
讓循環無縫銜接，為 spinner 加上無障礙的「載入中」標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就放慢或停止旋轉。Progress Ring (環形進度條)
別稱 Circular progress, Radial progress, Animated Circular Progress Bar
圓弧沿著圓環延伸，顯示完成的百分比。
適用情境
檔案上傳、目標、計時器
在[套用位置]加入「環形進度條」(Progress Ring)，也叫 circular progress 或 radial progress。
圓弧從頂端開始沿圓環順時針延伸，顯示完成的百分比，停下時緩緩減速，同時中間的數字跟著遞增。
讓圓弧和數字保持同步，並用正確的進度條語意向螢幕閱讀器提供數值。Button Loading State (按鈕載入狀態)
別稱 Spinner button, Loading button, Button spinner, Submit loading state
動作執行期間，按鈕把文字換成一個小載入圖示，或在旁邊加上它。
適用情境
表單送出、非同步操作
在[套用位置]加入「按鈕載入狀態」(Button Loading State)，也叫 spinner button 或 loading button。
按下時按鈕輕輕下壓，文字淡出，動作進行期間在原位置顯示一個小載入圖示，完成後文字再回來。
載入時保持按鈕寬度不變，防止重複點擊，並向螢幕閱讀器播報忙碌狀態。拖曳試試
Pull to Refresh (下拉重新整理)
別稱 Swipe to refresh
向下拖曳清單會露出載入圖示，放開後重新載入內容。
適用情境
動態消息、收件匣
在[套用位置]加入「下拉重新整理」(Pull to Refresh) 互動，也叫 swipe to refresh。
從頂端往下拉清單時，清單帶著一點阻力跟隨手指，並露出一個隨拉動旋轉的載入圖示；放開後載入圖示在內容重新載入期間持續旋轉，完成後清單平順地收回頂端。
只在清單已經捲動到頂端時才觸發，並為鍵盤和螢幕閱讀器使用者另外提供一般的重新整理按鈕。Loading & Progress 中的其他動效
Determinate Progress Bar (確定進度條)
別稱 Progress bar fill, Progress Indicator, Progress bar, Circular progress
進度條依任務完成比例由左往右填滿。
適用情境
檔案上傳、多步驟表單
在[套用位置]加入「確定進度條」(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
進度條隨實際進度由左往右填滿，每次更新之間平順過渡，並在旁邊顯示百分比。
使用含目前值、最小值和最大值的正確進度條語意，讓螢幕閱讀器能讀出進度，而且填充絕不能倒退。Indeterminate Linear Progress (不確定進度條)
別稱 Indeterminate progress bar, Buffer bar
時長未知時，一段進度條沿著軌道反覆滑過。
適用情境
頁面頂部或卡片載入
在[套用位置]加入「不確定進度條」(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任務時長未知期間，一小段進度條沿著軌道從一端滑到另一端，反覆進行，快速而流暢。
讓這一段完整地滑入並滑出軌道，使循環看不出銜接處，並為螢幕閱讀器將它標示為忙碌中的進度條。Multi-Step Loader (多步驟載入)
別稱 Step loader, Checklist loader
長任務推進時，步驟清單逐項醒目標示或打勾。
適用情境
AI 生成、新手導覽中的處理
在[套用位置]加入「多步驟載入」(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步驟由上而下逐一亮起，每完成一步就彈出一個小勾勾，節奏平穩、方便閱讀。
依照任務的實際進度推進步驟，而不是用固定計時器，並向螢幕閱讀器播報每個已完成的步驟。