Indeterminate Linear Progress (不確定進度條)
別稱 Indeterminate progress bar, Buffer bar
時長未知時，一段進度條沿著軌道反覆滑過。
適用情境
頁面頂部或卡片載入
變體
- indeterminate
- query
- buffer
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「不確定進度條」(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任務時長未知期間，一小段進度條沿著軌道從一端滑到另一端，反覆進行，快速而流暢。
讓這一段完整地滑入並滑出軌道，使循環看不出銜接處，並為螢幕閱讀器將它標示為忙碌中的進度條。相似的動效
Determinate Progress Bar (確定進度條)
別稱 Progress bar fill, Progress Indicator, Progress bar, Circular progress
進度條依任務完成比例由左往右填滿。
適用情境
檔案上傳、多步驟表單
在[套用位置]加入「確定進度條」(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
進度條隨實際進度由左往右填滿，每次更新之間平順過渡，並在旁邊顯示百分比。
使用含目前值、最小值和最大值的正確進度條語意，讓螢幕閱讀器能讀出進度，而且填充絕不能倒退。Top Loading Bar (頂部載入條)
別稱 Page progress bar, NProgress
頁面頂端的細條在換頁過程中緩慢前進，載入完成時走完全程。
適用情境
SPA 路由載入
在[套用位置]加入「頂部載入條」(Top Loading Bar)，也叫 page progress bar。
頁面載入時，頂端邊緣的細條先快速往前衝，接著越走越慢；載入完成後迅速衝到盡頭並淡出。
在載入真正完成之前絕不能走到盡頭，也不要遮住或推移頁面內容。Skeleton Shimmer (骨架微光)
別稱 Skeleton wave, Shimmer effect, placeholder-wave
一道亮光掃過灰色佔位圖形。
適用情境
內容載入佔位
在[套用位置]加入「骨架微光」(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光帶由左往右掃過灰色佔位圖形，下一次掃過前稍微停頓：流暢、不疾不徐。
佔位圖形要與實際版面一致，內容載入時不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示靜態佔位。Loading & Progress 中的其他動效
Multi-Step Loader (多步驟載入)
別稱 Step loader, Checklist loader
長任務推進時，步驟清單逐項醒目標示或打勾。
適用情境
AI 生成、新手導覽中的處理
在[套用位置]加入「多步驟載入」(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步驟由上而下逐一亮起，每完成一步就彈出一個小勾勾，節奏平穩、方便閱讀。
依照任務的實際進度推進步驟，而不是用固定計時器，並向螢幕閱讀器播報每個已完成的步驟。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)，就保持靜止。