Bouncing Dots (彈跳圓點)
別稱 Dots loader, Ellipsis loader, Three-dot loader
一排圓點依序彈跳、淡入淡出或縮放。
適用情境
行內載入、聊天等待
變體
- bounce
- pulse
- wave
- fade sequence
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「彈跳圓點」(Bouncing Dots)，也叫 dots loader 或 three-dot loader。
圓點以輕快、有彈性的節奏依序跳起再落下，一輪結束後稍微停頓，再重新開始。
循環要無縫銜接，並為螢幕閱讀器提供狀態標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。相似的動效
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)，就停止動畫。ABCDEF
Wavy Text (波浪文字)
別稱 Text Wave
字母依序上下起伏，在整個詞中形成流動的波浪。
適用情境
俏皮的標題、載入提示
在[套用位置]加入「波浪文字」(Wavy Text) 效果，也叫文字波浪 (text wave)。
字母依序上下起伏，讓一道輕柔流暢的波浪不斷穿過整個詞。
無縫循環，讓螢幕閱讀器把它讀作一個詞；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止波浪。Loading & Progress 中的其他動效
Button Loading State (按鈕載入狀態)
別稱 Spinner button, Loading button, Button spinner, Submit loading state
動作執行期間，按鈕把文字換成一個小載入圖示，或在旁邊加上它。
適用情境
表單送出、非同步操作
在[套用位置]加入「按鈕載入狀態」(Button Loading State)，也叫 spinner button 或 loading button。
按下時按鈕輕輕下壓，文字淡出，動作進行期間在原位置顯示一個小載入圖示，完成後文字再回來。
載入時保持按鈕寬度不變，防止重複點擊，並向螢幕閱讀器播報忙碌狀態。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。
進度條隨實際進度由左往右填滿，每次更新之間平順過渡，並在旁邊顯示百分比。
使用含目前值、最小值和最大值的正確進度條語意，讓螢幕閱讀器能讀出進度，而且填充絕不能倒退。