# 页面加载动效

URL: https://caijiao.org/animejs/5-cases/2-loading
Source: docs/animejs/5-cases/2-loading.md
Description: 本节介绍如何使用 Anime.js 实现页面加载动画，例如加载指示器、小球跳动等效果，增强用户等待时的感知体验。

加载动效是网页交互体验中非常重要的细节。通过动画让用户感知「正在处理」的状态，可以有效减少等待焦虑，提升体验。

## 常见加载动画形式

- 小球跳动（多个元素循环缩放或位移）
- 线条伸缩、旋转
- 循环帧动画（结合 SVG）

## 示例：三个小球循环跳动

```js
anime({
  targets: ".dot",
  translateY: [
    { value: -20, duration: 300 },
    { value: 0, duration: 300 },
  ],
  delay: anime.stagger(150, { start: 0, from: "first" }),
  loop: true,
  easing: "easeInOutSine",
});
```

该效果可模拟「加载中」状态，让页面在数据未到达前保持活跃感。

## 小结

加载动效能显著提升用户对系统响应的感知，应合理使用并保持简洁。

## 示例演示

[在线代码演示](/animejs/demos/12.html)