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。
进度条随真实进度从左向右填充，每次更新之间平滑过渡，并在旁边显示百分比。
使用带当前值、最小值和最大值的正确进度条语义，让屏幕阅读器能读出进度，并且填充绝不能倒退。