Blur-Up Placeholder (模糊佔位圖)

元素從嚴重模糊的狀態逐漸變清晰，常伴隨滑入或淡入。

在[套用位置]加入「模糊入場」(Blur In) 進場動畫，也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始，在原地逐漸變清晰：柔和、偏慢，沒有位移。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示清晰的文字。

一道亮光掃過灰色佔位圖形。

在[套用位置]加入「骨架微光」(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光帶由左往右掃過灰色佔位圖形，下一次掃過前稍微停頓：流暢、不疾不徐。
佔位圖形要與實際版面一致，內容載入時不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示靜態佔位。

灰色佔位區塊柔和地明暗變化，提示內容正在載入。

在[套用位置]加入「佔位脈動」(Pulse Placeholder)，也叫 skeleton pulse。
和即將出現的內容形狀一致的灰色佔位區塊一起緩慢變亮再恢復，節奏柔和、平穩。
佔位區塊要與實際版面一致，內容載入時不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

模糊強度朝邊緣逐漸增加，讓內容柔和地淡出。

在[套用位置]加入「漸進模糊」(Progressive Blur) 邊緣，也叫 gradient blur edge。
朝邊緣捲動的內容要逐漸變得更模糊、更柔和，平順過渡，而不是在一條生硬的線上被截斷。
只在後面還有更多內容的邊緣顯示模糊，而且模糊區域不能擋住點擊或捲動。

一排圓點依序彈跳、淡入淡出或縮放。

在[套用位置]加入「彈跳圓點」(Bouncing Dots)，也叫 dots loader 或 three-dot loader。
圓點以輕快、有彈性的節奏依序跳起再落下，一輪結束後稍微停頓，再重新開始。
循環要無縫銜接，並為螢幕閱讀器提供狀態標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。

動作執行期間，按鈕把文字換成一個小載入圖示，或在旁邊加上它。

在[套用位置]加入「按鈕載入狀態」(Button Loading State)，也叫 spinner button 或 loading button。
按下時按鈕輕輕下壓，文字淡出，動作進行期間在原位置顯示一個小載入圖示，完成後文字再回來。
載入時保持按鈕寬度不變，防止重複點擊，並向螢幕閱讀器播報忙碌狀態。

圓環或圓弧持續旋轉，表示正在載入。

在[套用位置]加入「圓形載入圈」(Circular Spinner)，也叫 spinner 或 throbber。
一段圓弧沿著淺色圓環等速旋轉，同時不斷伸長又縮短，流暢而連續。
旋轉要無縫銜接，並為螢幕閱讀器提供載入標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就放慢或停止旋轉。