Top Loading Bar (頂部載入條)
別稱 Page progress bar, NProgress
頁面頂端的細條在換頁過程中緩慢前進，載入完成時走完全程。
適用情境
SPA 路由載入
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「頂部載入條」(Top Loading Bar)，也叫 page progress bar。
頁面載入時，頂端邊緣的細條先快速往前衝，接著越走越慢；載入完成後迅速衝到盡頭並淡出。
在載入真正完成之前絕不能走到盡頭，也不要遮住或推移頁面內容。相似的動效
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)。
頂端的一條細條要隨著讀者捲動的距離從左往右填滿，到結尾時佔滿整個寬度。
直接綁定捲動位置，不要有緩動延遲，也不要遮住內容。Indeterminate Linear Progress (不確定進度條)
別稱 Indeterminate progress bar, Buffer bar
時長未知時，一段進度條沿著軌道反覆滑過。
適用情境
頁面頂部或卡片載入
在[套用位置]加入「不確定進度條」(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任務時長未知期間，一小段進度條沿著軌道從一端滑到另一端，反覆進行，快速而流暢。
讓這一段完整地滑入並滑出軌道，使循環看不出銜接處，並為螢幕閱讀器將它標示為忙碌中的進度條。Loading & Progress 中的其他動效
Typing Indicator (輸入中指示器)
別稱 Typing dots, Chat is typing
對話泡泡中的三個圓點輪流脈動或上浮，表示對方或 AI 正在輸入。
適用情境
聊天、AI 助理
在[套用位置]加入「輸入中指示器」(Typing Indicator)，也叫 typing dots。
對方輸入時，小對話泡泡裡的圓點依序上浮並變亮，節奏柔和、輕緩。
循環要無縫銜接，訊息一到就立刻移除泡泡，並為螢幕閱讀器提供一段簡短的狀態文字來取代圓點。Bar Loader (Equalizer) (等化器載入)
別稱 Bars loader, Audio bars
幾根直條錯開節奏地伸縮，像音訊等化器一樣。
適用情境
載入中或正在播放的指示
在[套用位置]加入「等化器載入」(Bar Loader (Equalizer)) 動畫，也叫 bars loader 或 audio bars。
幾根直條像音訊等化器一樣彼此錯開節奏地伸縮，節奏輕快但均勻。
循環要無縫銜接，為螢幕閱讀器加上狀態標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。Blur-Up Placeholder (模糊佔位圖)
別稱 LQIP, Blur placeholder, Progressive image load
先用一張極小的模糊版圖片佔位，完整圖片載入後逐漸變清晰。
適用情境
主視覺大圖、圖庫
在[套用位置]加入「模糊佔位圖」(Blur-Up Placeholder) 圖片載入效果，也叫 LQIP 或 blur placeholder。
先立刻用一張極小、高度模糊的圖片填滿圖片位置，完整圖片載入完成後，平順且較快地變清晰。
預先保留圖片的準確尺寸，圖片載入時不能造成任何位移；並裁掉模糊的邊緣，不要溢出邊框。