创建加载指示器、旋转加载器、进度条或骨架屏时…

适用于需要向用户传达加载/等待状态时，把 12 条迪士尼动画原则落到旋转加载器、进度条、骨架屏和加载点的实现中。

适用场景

解决思路

1. 弹跳圆点：落地时做压扁（squash），上升时做拉伸（stretch），形成有生命感的俏皮运动。
2. 预期动作：进度条完成前可短暂停顿或减速；旋转加载器停止前可减速，暗示即将完成。
3. 舞台调度：加载器应清晰可见但不要不必要地遮挡内容；骨架屏应放在真实内容将出现的位置。
4. 逐帧法 vs 姿态法：有机型加载器（如弹跳圆点）适合逐帧法（straight-ahead）；进度条用姿态法（pose-to-pose，0% 到 100% 关键帧）。
5. 跟随与重叠动作：多部件加载器的元件时间要错开；圆点 1 弹跳，圆点 2 在 100ms 后跟随，形成节奏。
6. 缓入缓出：旋转每一圈用 `ease-in-out`，连续旋转用 `linear`；弹跳上升用 `ease-in`，下落用 `ease-out`。
7. 弧线：轨道型加载器应沿真正的圆形弧线运动；弹跳元素应像真实物理一样沿抛物线运动。
8. 次要动作：旋转加载器旋转（主）时，发光脉冲（次）；骨架屏微光（shimmer）依附于骨架形状（主）。
9. 时间：旋转加载器完整旋转 800-1200ms；弹跳周期 500-800ms；骨架屏微光 1500-2500ms；进度条平滑更新 200ms；圆点错开 100-150ms；脉冲 1000-2000ms。
10. 夸张：俏皮品牌可用弹跳、弹性加载器；专业语境需要细腻、平滑的旋转加载器；匹配品牌能量。
11. 扎实绘画：保持一致的描边宽度；圆形路径应是真圆；进度条应均匀填充。
12. 吸引力：有吸引力的加载器能降低感知等待时间；无聊的旋转加载器会显得更慢；令人愉快的加载器可把挫败变成片刻愉悦。
13. `.spinner { animation: spin 1000ms linear infinite; }`
14. `@keyframes spin { to { transform: rotate(360deg); } }`
15. `.bounce-dot { animation: bounce 600ms ease-in-out infinite alternate; }`
16. `.bounce-dot:nth-child(2) { animation-delay: 100ms; }`
17. `.bounce-dot:nth-child(3) { animation-delay: 200ms; }`
18. `@keyframes bounce { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-20px) scaleY(0.9); } }`
19. `.skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 2000ms infinite; }`
20. `@keyframes shimmer { to { background-position: -200% 0; } }`
21. 关键属性：`transform` 用于 rotate、translateY、scale。
22. 关键属性：`animation` 用于无限循环（infinite loops）。
23. 关键属性：`background-position` 用于微光效果（shimmer effects）。
24. 关键属性：`stroke-dashoffset` 用于 SVG 旋转加载器。
25. 关键属性：`opacity` 用于脉冲效果（pulsing effects）。

适用边界 · 注意事项

• 不要用于即时完成、无需等待反馈的操作，否则加载器会制造无谓的等待感。
• 不要在专业/企业语境中使用过度夸张、弹跳或弹性的加载器；应改用细腻、平滑的旋转加载器。
• 不要用加载器不必要地遮挡内容；它应清晰可见但不阻塞内容，骨架屏应放在真实内容将出现的位置。