Animated loader with gravity physics, squash and stretch, glow halos, impact ripples and dynamic shadows. Built for loading screens and transitions that need more than a basic spinner.
Gravity physics with cubic-bezier easing
Squash and stretch rubber morphing on impact and flight
Glow halo with gradient color support per dot
Impact ripple shockwave on ground contact
Dynamic shadow scales with dot height
Staggered 0.15s timing for natural wave rhythm
Toggle ripple and shadow on or off independently
Up to 8 dots · GPU accelerated · No dependencies
Layout — dot count, size, spacing
Animation — bounce height, duration
Toggles — show ripple, show shadow
Colors — background, dot gradient start/end, glow, ripple, shadow
CSS keyframes with cubic-bezier easing
willChange transform for GPU acceleration
Independent animation tracks for bounce, morph, shadow and ripple
startTransition for React 18 performance
Loading screens · Splash pages · Processing indicators · Transition effects · Status indicators · Brand animations · Decorative sections
SEO Keywords
framer loading animation · framer bouncing dots · framer loader component · framer dot animation · framer loading dots · framer physics animation · framer bounce animation · framer loading spinner · framer animated loader · framer code component