别称 Bars loader, Audio bars
几根竖条错开节奏地伸缩，像音频均衡器一样。
适用场景
加载中或正在播放的指示
在[应用位置]添加“均衡器加载”(Bar Loader (Equalizer))动画，也叫 bars loader 或 audio bars。
几根竖条像音频均衡器一样彼此错开节奏地伸缩，节奏轻快但均匀。
循环要无缝衔接，为屏幕阅读器加上状态标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。别称 LQIP, Blur placeholder, Progressive image load
先用一张极小的模糊版图片占位，完整图片加载后逐渐变清晰。
适用场景
首屏大图、图库
在[应用位置]添加“模糊占位图”(Blur-Up Placeholder)图片加载效果，也叫 LQIP 或 blur placeholder。
先立即用一张极小、高度模糊的图片填满图片位置，完整图片加载完成后，平滑且较快地变清晰。
预先留出图片的准确尺寸，图片加载时不能引起任何位移；并裁掉模糊的边缘，不要溢出边框。别称 Dots loader, Ellipsis loader, Three-dot loader
一排圆点依次跳动、淡入淡出或缩放。
适用场景
行内加载、聊天等待
在[应用位置]添加“跳动圆点”(Bouncing Dots)，也叫 dots loader 或 three-dot loader。
圆点以轻快、有弹性的节奏依次跳起再落下，一轮结束后短暂停顿，再重新开始。
循环要无缝衔接，并为屏幕阅读器提供状态标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。别称 Spinner button, Loading button, Button spinner, Submit loading state
操作执行期间，按钮把文字换成一个小加载图标，或在旁边加上它。
适用场景
表单提交、异步操作
在[应用位置]添加“按钮加载状态”(Button Loading State)，也叫 spinner button 或 loading button。
按下时按钮轻轻下压，文字淡出，操作进行期间在原位置显示一个小加载图标，完成后文字再回来。
加载时保持按钮宽度不变，阻止重复点击，并向屏幕阅读器播报忙碌状态。别称 Spinner, Throbber, Circular indeterminate
圆环或圆弧持续旋转，表示正在加载。
适用场景
按钮、页面加载
在[应用位置]添加“环形加载”(Circular Spinner)，也叫 spinner 或 throbber。
一段圆弧沿着浅色圆环匀速旋转，同时不断伸长又缩短，流畅而连续。
旋转要无缝衔接，并为屏幕阅读器提供加载标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则放慢或停止旋转。别称 Progress bar fill, Progress Indicator, Progress bar, Circular progress
进度条按任务完成比例从左向右填充。
适用场景
文件上传、多步骤表单
在[应用位置]添加“确定进度条”(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
进度条随真实进度从左向右填充，每次更新之间平滑过渡，并在旁边显示百分比。
使用带当前值、最小值和最大值的正确进度条语义，让屏幕阅读器能读出进度，并且填充绝不能倒退。别称 Indeterminate progress bar, Buffer bar
时长未知时，一段进度条沿轨道反复滑过。
适用场景
页面顶部或卡片加载
在[应用位置]添加“不确定进度条”(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任务时长未知期间，一小段进度条沿着轨道从一端滑到另一端，反复进行，快速而流畅。
让这一段完整地滑入并滑出轨道，使循环看不出衔接处，并为屏幕阅读器将其标记为忙碌中的进度条。别称 Step loader, Checklist loader
长任务推进时，步骤列表逐项高亮或打勾。
适用场景
AI 生成、新手引导中的处理
在[应用位置]添加“多步骤加载”(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步骤从上到下逐个亮起，每完成一步就弹出一个小对勾，节奏平稳、便于阅读。
根据任务的真实进度推进步骤，而不是用固定计时器，并向屏幕阅读器播报每个已完成的步骤。别称 Circular progress, Radial progress, Animated Circular Progress Bar
圆弧沿圆环延伸，显示完成的百分比。
适用场景
文件上传、目标、计时器
在[应用位置]添加“环形进度”(Progress Ring)，也叫 circular progress 或 radial progress。
圆弧从顶部开始沿圆环顺时针延伸，显示完成的百分比，停下时缓缓减速，同时中间的数字跟着递增。
让圆弧和数字保持同步，并用正确的进度条语义向屏幕阅读器提供数值。别称 Skeleton pulse, placeholder-glow
灰色占位块柔和地明暗变化，提示内容正在加载。
适用场景
骨架屏
在[应用位置]添加“脉冲占位”(Pulse Placeholder)，也叫 skeleton pulse。
与即将出现的内容形状一致的灰色占位块一起缓慢变亮再恢复，节奏柔和、平稳。
占位块要与真实布局一致，内容加载进来时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。别称 Skeleton wave, Shimmer effect, placeholder-wave
一道亮光扫过灰色占位图形。
适用场景
内容加载占位
在[应用位置]添加“骨架屏流光”(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光带从左到右扫过灰色占位图形，下一次扫过前短暂停顿：流畅、不慌不忙。
占位图形要与真实布局一致，内容加载时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则显示静态占位。别称 Page progress bar, NProgress
页面顶部的细条在跳转过程中缓慢前进，加载完成时走完全程。
适用场景
SPA 路由加载
在[应用位置]添加“顶部加载条”(Top Loading Bar)，也叫 page progress bar。
页面加载时，顶部边缘的细条先快速前冲，然后越走越慢；加载完成后迅速冲到尽头并淡出。
在加载真正完成之前绝不能走到尽头，也不要遮挡或挤动页面内容。别称 Typing dots, Chat is typing
气泡中的三个圆点轮流跳动或上浮，表示对方或 AI 正在输入。
适用场景
聊天、AI 助手
在[应用位置]添加“正在输入提示”(Typing Indicator)，也叫 typing dots。
对方输入时，小聊天气泡里的圆点依次上浮并变亮，节奏柔和、轻缓。
循环要无缝衔接，消息一到就立刻移除气泡，并为屏幕阅读器提供一段简短的状态文字来代替圆点。