动画 · 加载与进度 · 05
跳动圆点
跳动圆点 = 三个圆点依次弹跳，在不占用整屏的前提下提示短暂的等待。
直达修改 Prompt →
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
跳动圆点是什么？
圆点是最轻量的加载指示。三个圆点先后弹起，眼睛读到「处理中」而不需要独占屏幕的转圈。错开约 0.15s、位移小一点——大幅弹跳显得在玩，不像在加载。
动画 标本
- 触发
- load
- 技术
- css
- 时长
- 1.2s
- 缓动
ease-in-out- 性能
- transform, opacity
什么时候用
- Inline button or field loading
- Small fetches where a full spinner is too heavy
什么时候别用
- Long operations — dots imply a quick wait; pair with a label if it runs long
- Inside already-animated areas (parallax) where motion competes
Pair dots with a short text ('Loading…') when the wait can exceed two seconds.
Make a three-dot spinner: dots bounce 8px on a 1.2s loop with 0.15s stagger between them, transform and opacity only.