loaders-spinners

加载指示器与旋转动画原则

将迪士尼的 12 条原则运用于加载指示器，打造有趣且信息丰富的等待体验。

加载指示器中的原则

1. 挤压与拉伸

弹跳圆点加载指示器落地时应挤压，上升时应拉伸。这样能让动作更生动、活泼。

2. 预备动作

进度完成前，进度条可以短暂停顿或减速。旋转指示器可以在停止前减速。这样能传达即将完成的信号。

3. 演出布局

加载指示器应清晰可见，但不应造成不必要的内容遮挡。骨架屏会在实际内容即将出现的位置安排布局。

4. 连续动作与关键姿势

弹跳圆点等有机加载指示器适合采用连续动作。进度条则适合采用关键姿势（0% 到 100% 的关键帧）。

5. 跟随动作与重叠动作

多部分组成的加载指示器应让各元素的动作在时间上错开。第 1 个圆点先弹跳，第 2 个圆点晚 100ms 跟上。这样能形成节奏感。

6. 缓入与缓出

旋转：每次旋转周期使用 ease-in-out，或使用 linear 实现连续旋转。弹跳：上升时缓入，下降时缓出。

7. 弧线

轨道式加载指示器应沿真正的圆弧运动。弹跳元素应沿抛物线运动，模拟真实物理效果。

8. 次要动作

旋转指示器旋转（主要动作）时，光晕同步脉动（次要动作）。骨架屏的闪光效果是骨架形状之外的次要动作。

9. 时间

• 旋转指示器完整旋转一周：800-1200ms
• 弹跳周期：500-800ms
• 骨架屏闪光效果：1500-2500ms
• 进度条平滑更新：200ms
• 圆点错开时间：100-150ms
• 脉动：1000-2000ms

10. 夸张

活泼的品牌可以使用弹性十足、富有弹跳感的加载指示器。专业场景则需要微妙、平滑的旋转指示器。应与品牌调性保持一致。

11. 扎实的造型

保持笔画宽度一致。圆形路径应是真正的圆形。进度条应均匀填充。

12. 吸引力

引人入胜的加载指示器能缩短用户感知到的等待时间。乏味的旋转指示器会让等待显得更久。令人愉悦的加载指示器能将沮丧转化为片刻的愉悦。

CSS 实现

.spinner {
  animation: spin 1000ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.bounce-dot {
  animation: bounce 600ms ease-in-out infinite alternate;
}

.bounce-dot:nth-child(2) { animation-delay: 100ms; }
.bounce-dot:nth-child(3) { animation-delay: 200ms; }

@keyframes bounce {
  from { transform: translateY(0) scaleY(1); }
  to { transform: translateY(-20px) scaleY(0.9); }
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 2000ms infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

关键属性

• transform：旋转、垂直平移、缩放
• animation：无限循环
• background-position：闪光效果
• stroke-dashoffset：SVG 旋转指示器
• opacity：脉动效果