Donut Chart Fill (环形图填充)
别称 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
环形或饼图按顺时针方向填充到对应的百分比。
适用场景
占比构成展示
变体
- SVG stroke-dashoffset
- conic-gradient with @property
- multi-segment
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“环形图填充”(Donut Chart Fill)动画，也叫 pie chart sweep 或 animated donut chart。
从顶部开始，各段依次顺时针扫出，直到圆环显示出各自的占比，结束时平滑减速。
图表进入视口时只播放一次，并以文本形式为屏幕阅读器提供实际数值。相似的动效
Progress Ring (环形进度)
别称 Circular progress, Radial progress, Animated Circular Progress Bar
圆弧沿圆环延伸，显示完成的百分比。
适用场景
文件上传、目标、计时器
在[应用位置]添加“环形进度”(Progress Ring)，也叫 circular progress 或 radial progress。
圆弧从顶部开始沿圆环顺时针延伸，显示完成的百分比，停下时缓缓减速，同时中间的数字跟着递增。
让圆弧和数字保持同步，并用正确的进度条语义向屏幕阅读器提供数值。Chart Data Transition (图表数据过渡)
别称 Chart Update Animation
数据变化或切换数据集时，图表元素从旧值平滑过渡到新值。
适用场景
实时仪表盘
在[应用位置]添加“图表数据过渡”(Chart Data Transition)，也叫 chart update animation。
数据变化时，所有柱子同时从旧值平滑、从容地过渡到新值，而不是从零重新绘制。
每次更新都从屏幕上当前的数值开始，这样快速连续的第二次变化也不会跳变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即应用新数值。Circular Spinner (环形加载)
别称 Spinner, Throbber, Circular indeterminate
圆环或圆弧持续旋转，表示正在加载。
适用场景
按钮、页面加载
在[应用位置]添加“环形加载”(Circular Spinner)，也叫 spinner 或 throbber。
一段圆弧沿着浅色圆环匀速旋转，同时不断伸长又缩短，流畅而连续。
旋转要无缝衔接，并为屏幕阅读器提供加载标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则放慢或停止旋转。Data & Numbers 中的其他动效
- %
Number Ticker (数字递增)
别称 Count Up, Animated Counter, Number Counter, countUp
数字进入可见区域时，从起始值计数到目标值。
适用场景
统计数据、KPI 模块
在[应用位置]添加“数字递增”(Number Ticker)，也叫 count up 或 animated counter。
数字进入视口时，从零计数到目标值，开始时快，接近终点时柔和地放慢。
使用等宽数字，避免周围内容抖动；只计数一次；对屏幕阅读器以及开启了“减少动态效果”(prefers-reduced-motion)的用户，直接给出最终数值。0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (数字滚轮)
别称 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
数字变化时，每一位都纵向滚动到新的值。
适用场景
实时计数器、价格
在[应用位置]添加“数字滚轮”(Odometer)数字动画，也叫 rolling numbers 或老虎机数字(slot-machine digits)。
数值变化时，每一位都纵向滚动到新的数字，始终向前滚动，各位之间略有错开，结尾有轻微的回稳。
让每一位数字宽度相同，避免整个数字位移；只向屏幕阅读器提供最终数值。Animated Map Arcs (地图飞线)
别称 World Map Animated Lines, Globe Arcs
线条和圆点在地图或地球上的各个地点之间动态移动。
适用场景
展示全球覆盖的视觉
在[应用位置]添加“地图飞线”(Animated Map Arcs)，也叫 globe arcs。
曲线在点阵地图的各地点之间依次画出，随后向目的地收回，同时目的地处有一圈柔和的光环脉动：平静而稳定。
让各条弧线错开时间，绝不同步移动；循环要无缝；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则暂停播放。