Typing Indicator (輸入中指示器)
別稱 Typing dots, Chat is typing
對話泡泡中的三個圓點輪流脈動或上浮，表示對方或 AI 正在輸入。
適用情境
聊天、AI 助理
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「輸入中指示器」(Typing Indicator)，也叫 typing dots。
對方輸入時，小對話泡泡裡的圓點依序上浮並變亮，節奏柔和、輕緩。
循環要無縫銜接，訊息一到就立刻移除泡泡，並為螢幕閱讀器提供一段簡短的狀態文字來取代圓點。相似的動效
Bouncing Dots (彈跳圓點)
別稱 Dots loader, Ellipsis loader, Three-dot loader
一排圓點依序彈跳、淡入淡出或縮放。
適用情境
行內載入、聊天等待
在[套用位置]加入「彈跳圓點」(Bouncing Dots)，也叫 dots loader 或 three-dot loader。
圓點以輕快、有彈性的節奏依序跳起再落下，一輪結束後稍微停頓，再重新開始。
循環要無縫銜接，並為螢幕閱讀器提供狀態標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。ABC DEFG
Typewriter (打字機效果)
別稱 Typing Animation, Typewriter Effect, Typing Text
字元像打字一樣逐一出現，通常後面跟著一個閃爍的游標。
適用情境
主視覺大標題、標語
在[套用位置]加入「打字機效果」(Typewriter)，也叫打字動畫 (typing animation) 或打字文字 (typing text)。
字元以穩定的打字節奏逐一出現，最後一個已輸入字元後面緊跟一個游標，打完後閃爍幾次。
只播放一次、不要循環，讓螢幕閱讀器立即讀到完整文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示完整文字。ABCDEF
Wavy Text (波浪文字)
別稱 Text Wave
字母依序上下起伏，在整個詞中形成流動的波浪。
適用情境
俏皮的標題、載入提示
在[套用位置]加入「波浪文字」(Wavy Text) 效果，也叫文字波浪 (text wave)。
字母依序上下起伏，讓一道輕柔流暢的波浪不斷穿過整個詞。
無縫循環，讓螢幕閱讀器把它讀作一個詞；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止波浪。Loading & Progress 中的其他動效
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。
先立刻用一張極小、高度模糊的圖片填滿圖片位置，完整圖片載入完成後，平順且較快地變清晰。
預先保留圖片的準確尺寸，圖片載入時不能造成任何位移；並裁掉模糊的邊緣，不要溢出邊框。