Circular Spinner (环形加载)
别称 Spinner, Throbber, Circular indeterminate
圆环或圆弧持续旋转，表示正在加载。
适用场景
按钮、页面加载
变体
- border spinner
- dashed arc
- dual ring
- orbit dots
- infinity loop
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“环形加载”(Circular Spinner)，也叫 spinner 或 throbber。
一段圆弧沿着浅色圆环匀速旋转，同时不断伸长又缩短，流畅而连续。
旋转要无缝衔接，并为屏幕阅读器提供加载标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则放慢或停止旋转。相似的动效
Spin (无限旋转)
别称 Rotate Loop, Spinner
元素以恒定速度持续旋转。
适用场景
加载转圈指示器
在[应用位置]添加“无限旋转”(Spin)效果，也叫 spinner 或 rotate loop。
元素要以恒定、均匀的速度持续旋转，每圈之间不要有缓动。
让循环无缝衔接，给 spinner 加上无障碍的“加载中”标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就放慢或停止旋转。Progress Ring (环形进度)
别称 Circular progress, Radial progress, Animated Circular Progress Bar
圆弧沿圆环延伸，显示完成的百分比。
适用场景
文件上传、目标、计时器
在[应用位置]添加“环形进度”(Progress Ring)，也叫 circular progress 或 radial progress。
圆弧从顶部开始沿圆环顺时针延伸，显示完成的百分比，停下时缓缓减速，同时中间的数字跟着递增。
让圆弧和数字保持同步，并用正确的进度条语义向屏幕阅读器提供数值。Button Loading State (按钮加载状态)
别称 Spinner button, Loading button, Button spinner, Submit loading state
操作执行期间，按钮把文字换成一个小加载图标，或在旁边加上它。
适用场景
表单提交、异步操作
在[应用位置]添加“按钮加载状态”(Button Loading State)，也叫 spinner button 或 loading button。
按下时按钮轻轻下压，文字淡出，操作进行期间在原位置显示一个小加载图标，完成后文字再回来。
加载时保持按钮宽度不变，阻止重复点击，并向屏幕阅读器播报忙碌状态。拖动试试
Pull to Refresh (下拉刷新)
别称 Swipe to refresh
向下拖动列表会露出加载图标，松开后重新加载内容。
适用场景
信息流、收件箱
在[应用位置]添加“下拉刷新”(Pull to Refresh)交互，也叫 swipe to refresh。
从顶部向下拉列表时，列表带着一点阻力跟随手指，并露出一个随拉动旋转的加载图标；松开后加载图标在内容重新加载期间持续旋转，完成后列表平滑地收回顶部。
只在列表已经滚动到顶部时才触发，并为键盘和屏幕阅读器用户另外提供一个普通的刷新按钮。Loading & Progress 中的其他动效
Determinate Progress Bar (确定进度条)
别称 Progress bar fill, Progress Indicator, Progress bar, Circular progress
进度条按任务完成比例从左向右填充。
适用场景
文件上传、多步骤表单
在[应用位置]添加“确定进度条”(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
进度条随真实进度从左向右填充，每次更新之间平滑过渡，并在旁边显示百分比。
使用带当前值、最小值和最大值的正确进度条语义，让屏幕阅读器能读出进度，并且填充绝不能倒退。Indeterminate Linear Progress (不确定进度条)
别称 Indeterminate progress bar, Buffer bar
时长未知时，一段进度条沿轨道反复滑过。
适用场景
页面顶部或卡片加载
在[应用位置]添加“不确定进度条”(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任务时长未知期间，一小段进度条沿着轨道从一端滑到另一端，反复进行，快速而流畅。
让这一段完整地滑入并滑出轨道，使循环看不出衔接处，并为屏幕阅读器将其标记为忙碌中的进度条。Multi-Step Loader (多步骤加载)
别称 Step loader, Checklist loader
长任务推进时，步骤列表逐项高亮或打勾。
适用场景
AI 生成、新手引导中的处理
在[应用位置]添加“多步骤加载”(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步骤从上到下逐个亮起，每完成一步就弹出一个小对勾，节奏平稳、便于阅读。
根据任务的真实进度推进步骤，而不是用固定计时器，并向屏幕阅读器播报每个已完成的步骤。