页面加载动效

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

常见加载动画形式

小球跳动（多个元素循环缩放或位移）
线条伸缩、旋转
循环帧动画（结合 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'
});

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

小结

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

示例演示

loading