Progress Ring (环形进度)
别称 Circular progress, Radial progress, Animated Circular Progress Bar
圆弧沿圆环延伸，显示完成的百分比。
适用场景
文件上传、目标、计时器
变体
- determinate
- indeterminate
- stroke-dashoffset
- conic-gradient
- counting label
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“环形进度”(Progress Ring)，也叫 circular progress 或 radial progress。
圆弧从顶部开始沿圆环顺时针延伸，显示完成的百分比，停下时缓缓减速，同时中间的数字跟着递增。
让圆弧和数字保持同步，并用正确的进度条语义向屏幕阅读器提供数值。相似的动效
Donut Chart Fill (环形图填充)
别称 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
环形或饼图按顺时针方向填充到对应的百分比。
适用场景
占比构成展示
在[应用位置]添加“环形图填充”(Donut Chart Fill)动画，也叫 pie chart sweep 或 animated donut chart。
从顶部开始，各段依次顺时针扫出，直到圆环显示出各自的占比，结束时平滑减速。
图表进入视口时只播放一次，并以文本形式为屏幕阅读器提供实际数值。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。
进度条随真实进度从左向右填充，每次更新之间平滑过渡，并在旁边显示百分比。
使用带当前值、最小值和最大值的正确进度条语义，让屏幕阅读器能读出进度，并且填充绝不能倒退。在里面滚动
Scroll Progress Indicator (滚动进度条)
别称 Reading Progress Bar, Progress Bar
随着用户滚动页面或文章，进度条或圆环逐渐填满。
适用场景
文章、长页面
在[应用位置]添加“滚动进度条”(Scroll Progress Indicator)，也叫阅读进度条(reading progress bar)。
顶部的一条细条要随着读者滚动的距离从左向右填充，到末尾时铺满整个宽度。
直接绑定滚动位置，不要有缓动延迟，也不要遮挡内容。Loading & Progress 中的其他动效
Pulse Placeholder (脉冲占位)
别称 Skeleton pulse, placeholder-glow
灰色占位块柔和地明暗变化，提示内容正在加载。
适用场景
骨架屏
在[应用位置]添加“脉冲占位”(Pulse Placeholder)，也叫 skeleton pulse。
与即将出现的内容形状一致的灰色占位块一起缓慢变亮再恢复，节奏柔和、平稳。
占位块要与真实布局一致，内容加载进来时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。Skeleton Shimmer (骨架屏流光)
别称 Skeleton wave, Shimmer effect, placeholder-wave
一道亮光扫过灰色占位图形。
适用场景
内容加载占位
在[应用位置]添加“骨架屏流光”(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光带从左到右扫过灰色占位图形，下一次扫过前短暂停顿：流畅、不慌不忙。
占位图形要与真实布局一致，内容加载时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则显示静态占位。Top Loading Bar (顶部加载条)
别称 Page progress bar, NProgress
页面顶部的细条在跳转过程中缓慢前进，加载完成时走完全程。
适用场景
SPA 路由加载
在[应用位置]添加“顶部加载条”(Top Loading Bar)，也叫 page progress bar。
页面加载时，顶部边缘的细条先快速前冲，然后越走越慢；加载完成后迅速冲到尽头并淡出。
在加载真正完成之前绝不能走到尽头，也不要遮挡或挤动页面内容。