Loading Animations

Creative and engaging loading indicators.

Dots Wave

A classic three-dot wave for simple loading states.

anime({
  targets: '#loading-dots .dot',
  translateY: [
    { value: -10, duration: 250, easing: 'easeOutQuad' },
    { value: 0, duration: 250, easing: 'easeInQuad' }
  ],
  delay: anime.stagger(100),
  loop: true,
  easing: 'linear'
});

Spinning Loader

A circular spinner with a partial border.

anime({
  targets: '#loading-spinner .spinner',
  rotate: '1turn',
  duration: 1000,
  loop: true,
  easing: 'linear'
});

Line Scale

Scaling lines that create a rhythmic effect.

anime({
  targets: '#loading-lines .line',
  scaleY: [
    { value: 1, duration: 400, easing: 'easeOutExpo' },
    { value: 0.2, duration: 600, easing: 'easeOutExpo' }
  ],
  delay: anime.stagger(200),
  loop: true,
  direction: 'alternate',
});