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。
先立即用一张极小、高度模糊的图片填满图片位置，完整图片加载完成后，平滑且较快地变清晰。
预先留出图片的准确尺寸，图片加载时不能引起任何位移；并裁掉模糊的边缘，不要溢出边框。