Skeleton Loaders

Placeholder loading effects to improve perceived performance.

Pulse

A simple, clean pulse effect for placeholder elements.

anime({
  targets: '#skeleton-pulse .pulse-element',
  opacity: [0.5, 1],
  duration: 1000,
  easing: 'linear',
  direction: 'alternate',
  loop: true
});

Shimmer

A popular sweeping shine effect that moves across loading cards.

anime({
  targets: '#skeleton-shimmer .shimmer-element',
  translateX: ['-100%', '200%'],
  duration: 1500,
  easing: 'linear',
  loop: true,
  delay: 400
});