Skip to main content
// LOADING STATES

Loading State Guide

Animations that keep users engaged during waits. From skeleton screens to spinners, each state serves a purpose.

✨

Loading Animations

28 types
Classic Spinner
// TRADITIONAL

The timeless circular loader. Best for short waits under 3 seconds. Simple, recognizable, and universally understood.

⏱️ 0-3s waits 📱 Mobile-friendly
simple classic
Pulse Effect
// BREATHING

A gentle pulsing circle that mimics a heartbeat. Creates a calming effect for wellness apps or meditation tools.

💚 Calming 🌊 Smooth
calm wellness
Bouncing Dots
// PLAYFUL

Three dots bouncing in sequence. Adds a touch of playfulness while indicating ongoing activity.

🎵 Musical feel 😊 Friendly
playful friendly
Progress Bar
// INDETERMINATE

Fills and empties to show ongoing activity. Works well for file uploads or data processing tasks.

📊 Shows progress 📁 File operations
uploads processing
Skeleton Screen
// CONTENT PREVIEW

Mimics the actual content layout with shimmering blocks. Reduces perceived wait time by showing structure.

📰 Content-heavy ⚡ Perceived speed
content feeds
Audio Wave
// RHYTHMIC

Bars that grow and shrink like audio visualization. Perfect for music apps or audio-heavy interfaces.

🎵 Music apps 🎙️ Audio content
audio music
Circular Progress
// MODERN

A modern circular loader with smooth rotation. Great for dashboards and data-heavy applications.

📊 Dashboards 🔄 Updates
modern data
Elastic Bars
// DYNAMIC

Bars that stretch and compress elastically. Adds energy and movement to the loading experience.

💪 Energetic 🎪 Dynamic
energetic dynamic
Double Spinner
// DUAL LAYER

Two concentric spinners rotating in opposite directions with different colors. Creates depth and visual interest.

🔄 Dual rotation 🎨 Two-tone
modern depth
Square Pulse
// GEOMETRIC

A square that pulses and rotates simultaneously. Clean and geometric, perfect for tech-focused interfaces.

📐 Geometric 🔄 Rotating
tech geometric
Triangle Wave
// WAVE FORM

Triangles moving in a wave pattern. Creates a rhythmic, flowing effect that feels organic and natural.

🌊 Wave motion 📐 Triangular
organic rhythmic
Orbiting Dots
// CIRCULAR

One dot orbiting around another. Suggests motion, travel, or exploration. Perfect for mapping or navigation apps.

🪐 Orbital 🚀 Exploration
navigation travel
Flipping Box
// 3D

A box flipping in 3D space. Creates a sense of dimensionality and depth. Great for creative or interactive apps.

📦 3D effect 🔄 Flipping
3D creative
ZigZag Bars
// DIAGONAL

Bars moving in a zigzag pattern. Adds a playful, dynamic twist to the traditional loading animation.

↗️ Diagonal 🎮 Playful
playful dynamic
Heartbeat
// LIFE

A heart shape pulsing like a heartbeat. Perfect for health, fitness, or social apps that emphasize connection.

❤️ Heart 💓 Pulse
health social
Infinity
// CONTINUOUS

Two dots moving in an infinity pattern. Suggests endlessness, continuity, or unlimited possibilities.

♾️ Infinite 🔄 Loop
infinite loop
Spin Dots
// ROTATING

Dots that spin and scale. Combines rotation with size variation for a dynamic visual effect.

🔄 Rotating 📏 Scaling
dynamic modern
Blink
// FLASHING

A circle that blinks on and off. Simple yet effective, with a gentle pulsing effect.

✨ Blinking 💡 Simple
simple gentle
Rotate Box
// 3D ROTATION

A box rotating in 3D space. Creates a sense of dimensionality and movement.

📦 3D 🔄 Rotating
3D rotating
Water Drop
// FLUID

A water drop shape that bounces. Creates a fluid, organic motion effect.

💧 Water 🌊 Fluid
fluid organic
Swinging Ball
// PENDULUM

A ball swinging like a pendulum. Creates a rhythmic, hypnotic effect.

🔄 Pendulum 🎵 Rhythmic
pendulum rhythmic
Morphing Shape
// TRANSFORMATION

A shape that continuously morphs between different forms. Creates a dynamic, ever-changing effect.

🔄 Morphing ✨ Dynamic
morphing dynamic
Rolling Dots
// ROLLING

Dots rolling in sequence. Creates a sense of movement and progress.

🎲 Rolling ⏱️ Progress
rolling progress
Spring Ball
// BOUNCY

A ball with a springy motion. Creates a playful, energetic effect.

⚡ Spring 🎪 Energetic
spring energetic
Fan Blades
// ROTATING

Two blades rotating like a fan. Creates a sense of air movement or cooling.

💨 Fan 🔄 Rotating
fan rotating
Pulse Ring
// RIPPLE

A ring pulsing outward in concentric circles. Creates a ripple effect like water.

🌊 Ripple 🔄 Pulsing
ripple pulsing
Sliding Dot
// CIRCULAR

A dot sliding along the circumference of a circle. Creates a smooth, continuous motion.

🚶 Sliding 🔄 Circular
sliding circular
Glowing Orb
// LUMINOUS

A glowing orb with varying light intensity. Creates a magical, ethereal effect.

✨ Glowing 🔮 Ethereal
glowing ethereal
Bouncing Ball
// BOUNCY

A simple bouncing ball animation. Playful and universally recognizable.

🎾 Bouncing 😊 Playful
bouncing playful
📋

Best Practices

4 practices
⏱️

Duration Matters

Under 100ms: No loader needed. 100ms-1s: Instant feel, minimal animation. 1-10s: Skeleton or progress indicator. Over 10s: Show progress percentage and estimated time.

🎯

Match the Brand

Use loading animations that align with your brand personality. Tech apps might prefer clean geometric loaders, while creative brands can use more playful animations.

♿

Accessibility First

Respect reduced motion preferences using prefers-reduced-motion media query. Provide text alternatives for screen readers where meaningful.

⚡

Performance Optimized

Use CSS animations over JavaScript animations where possible. Avoid animating large areas or expensive properties like layout or paint triggers.