34 CSS Loader Examples

Dependencies:

A loader that turns a tiny skateboard motion into a clean looping animation.

Skateboard loader

Made with:

Dependencies:

A loader that breaks rhythm for a moment before snapping back into its loop.

Loading goes off track

Made with:

Dependencies:

A shopping cart animation that works especially well for ecommerce loading states.

Shopping cart preloader

Made with:

Dependencies:

A colorful morphing loader with soft shape transitions and a lively rhythm.

Dance morph loader

Made with:

Dependencies:

A frosted glass style loader that feels closer to a hero animation than a basic spinner.

Frosted glass loader

Made with:

Dependencies:

Compass loader

A compass-inspired loader with crisp rotation and clean geometric shapes.

Made with:

Dependencies:

An infinity loop preloader finished with a bright gradient.

Infinity preloader

Made with:

Dependencies:

A snowball-style loader with enough shading to feel tactile instead of flat.

Snowball loader

Made with:

Dependencies:

A rotating smiley face loader that stays simple and readable.

Smiley preloader

Made with:

Dependencies:

A pencil-based loader with a full circular drawing motion.

Pencil preloader

Made with:

Dependencies:

A loader built from the old Slack mark with a smooth rotating pattern.

Slack loader

Made with:

Dependencies:

A soft box loader with squash-and-stretch motion.

Jelly box preloader

Made with:

Dependencies:

A compact orange spinner with a punchy looping motion.

Inspired loader

Made with:

Dependencies:

A dot loader stripped back to the minimum.

Simple loader

Made with:

Dependencies:

A glowing ring loader with a clean sci-fi feel.

Ring of light

Made with:

Dependencies:

Code loader

A developer-friendly loader that animates curly braces instead of dots.

Made with:

Three simple pieces moving at different tempos so the loop never feels static.

Dependencies:

Less

New preloader

Made with:

Dependencies:

A clever stairs animation where a ball keeps climbing in place.

CSS stairs loader

Made with:

Dependencies:

A text-based loader that flips between wait and loading using blocks.

CSS Flippy loader

Made with:

Dependencies:

Neumorphic preloader

A soft neumorphic loader built from four moving squares.

Made with:

Dependencies:

A rounded spinner with a subtle lit edge and a smooth loop.

Loader animation

Made with:

Dependencies:

A box-based loader that uses depth well without getting noisy.

3D boxes loader

Made with:

Dependencies:

Pure CSS book loader

A book page animation used as a loader, with a clear start-to-end motion.

Made with:

Dependencies:

Infinite loader

Three dots chasing each other in a continuous loop.

Made with:

Dependencies:

A 3D infinity loader with more depth and motion than most spinner patterns.

∞ Loader animation

Made with:

Dependencies:

Colorful dissolving loader

A colorful loader that dissolves and reforms instead of simply spinning.

Made with:

Dependencies:

A clean infinity-shaped loader built with pure CSS.

Infinite loader

Made with:

Dependencies:

A butterfly-like motion made from dots and a central stripe.

Butterfly loader

Made with:

An atom-inspired preloader with orbital motion.

Dependencies:

GSAP

Atom preloader

Made with:

Dependencies:

A gradient preloader built around a smooth wave motion.

Wavy preloader

Made with:

Dependencies:

A bubble-style loader with a light floating rhythm.

Bubble preloader

Made with:

Dependencies:

A spinner with an electric glow effect and a sharper visual style.

Electric Spinner

Made with:

Dependencies:

A neon loader that keeps transforming instead of repeating one simple rotation.

Transforming loader

Made with:

Dependencies: