Top Loading Bar (顶部加载条)
别称 Page progress bar, NProgress
页面顶部的细条在跳转过程中缓慢前进，加载完成时走完全程。
适用场景
SPA 路由加载
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“顶部加载条”(Top Loading Bar)，也叫 page progress bar。
页面加载时，顶部边缘的细条先快速前冲，然后越走越慢；加载完成后迅速冲到尽头并淡出。
在加载真正完成之前绝不能走到尽头，也不要遮挡或挤动页面内容。相似的动效
Determinate Progress Bar (确定进度条)
别称 Progress bar fill, Progress Indicator, Progress bar, Circular progress
进度条按任务完成比例从左向右填充。
适用场景
文件上传、多步骤表单
在[应用位置]添加“确定进度条”(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
进度条随真实进度从左向右填充，每次更新之间平滑过渡，并在旁边显示百分比。
使用带当前值、最小值和最大值的正确进度条语义，让屏幕阅读器能读出进度，并且填充绝不能倒退。在里面滚动
Scroll Progress Indicator (滚动进度条)
别称 Reading Progress Bar, Progress Bar
随着用户滚动页面或文章，进度条或圆环逐渐填满。
适用场景
文章、长页面
在[应用位置]添加“滚动进度条”(Scroll Progress Indicator)，也叫阅读进度条(reading progress bar)。
顶部的一条细条要随着读者滚动的距离从左向右填充，到末尾时铺满整个宽度。
直接绑定滚动位置，不要有缓动延迟，也不要遮挡内容。Indeterminate Linear Progress (不确定进度条)
别称 Indeterminate progress bar, Buffer bar
时长未知时，一段进度条沿轨道反复滑过。
适用场景
页面顶部或卡片加载
在[应用位置]添加“不确定进度条”(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任务时长未知期间，一小段进度条沿着轨道从一端滑到另一端，反复进行，快速而流畅。
让这一段完整地滑入并滑出轨道，使循环看不出衔接处，并为屏幕阅读器将其标记为忙碌中的进度条。Loading & Progress 中的其他动效
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)，则停止动画。Blur-Up Placeholder (模糊占位图)
别称 LQIP, Blur placeholder, Progressive image load
先用一张极小的模糊版图片占位，完整图片加载后逐渐变清晰。
适用场景
首屏大图、图库
在[应用位置]添加“模糊占位图”(Blur-Up Placeholder)图片加载效果，也叫 LQIP 或 blur placeholder。
先立即用一张极小、高度模糊的图片填满图片位置，完整图片加载完成后，平滑且较快地变清晰。
预先留出图片的准确尺寸，图片加载时不能引起任何位移；并裁掉模糊的边缘，不要溢出边框。