Skip to main content
Sync UI offers a variety of loader animation styles to enhance your user interface and provide visual feedback during loading states.

Variants

Pulsating Dots

Three dots that pulsate in sequence.

Morphing Cube

A square that rotates and morphs into a circle.

Pulsating Ring

A circle that pulsates and rotates.

Circular Sweep

A circular progress indicator that sweeps around.

Fading Squares

Four squares that fade in and out in sequence.

Orbital Spin

A circular border that spins around its center.

Triadic Orbit

Three circles orbiting around a central point.

Bar Wave

A series of bars that move up and down in a wave pattern.

Features

  • Theme-aware (adapts to dark/light mode)
  • Smooth animations using Framer Motion
  • Infinite loop animations
  • Lightweight and performant
  • Customizable colors and sizes

Usage

Loaders are perfect for:
  • Page loading states
  • Button loading indicators
  • Data fetching feedback
  • Processing operations
  • Async action feedback

Customization

Each loader can be customized by modifying:
  • Colors (automatically adapts to theme)
  • Size dimensions
  • Animation speed and timing
  • Easing functions

Build docs developers (and LLMs) love