Advertisement
A CSS loading animation is the visual placeholder shown while users wait for content or a route to load. These 15 hand-coded loaders are ready-to-ship spinners, dot loaders, and progress indicators for any async UI — copy the markup, show during fetches, and ship.
01 / 15
House Unlock
CSS + JS 
A closed-front-door loader for property sites. The window stays dark while the key turns; once "loaded" (the .ready class is added), the window glows warm gold and the door opens to reveal a softly-lit room. Ideal as a real-estate page-load cover.
02 / 15
Listing Card Skeleton
CSS + JS 
A premium listing-card skeleton that mirrors the real layout — photo, price, address, agent — then crossfades into the loaded card when `.ready` is added. Users see the page shape before content arrives, which is the modern, perceived-performance pattern used by Airbnb and Booking. Respects `prefers-reduced-motion`.
03 / 15
Progress Path
CSS + JS 
An honest progress bar built on the native `<progress>` element — semantic, screen-reader-announced, and bindable to real load progress (image preloads, fetch chunks, route transitions). A moving plane glides along the path, with the percentage announced via `aria-valuenow`. Degrades gracefully: a static bar appears if JS is disabled.
04 / 15
Heat-Map Compass
CSS + JS 
A premium navigation loader for property and travel platforms — a brass compass dial with cardinal points lighting one at a time as warm "heat" rings pulse outward. A monospace coordinate readout drifts below, suggesting the system is "scanning your neighbourhood". Honest narrative for indeterminate location-aware loads.
05 / 15
Floor-by-Floor
CSS + JS 
A vertical luxury-building loader. Floors light up bottom-to-top like an elevator passing each level, room silhouettes flicker on inside, and a penthouse glow crowns the building when `.ready` is added. Turns waiting time into an architectural narrative — perfect for residential developments and high-end real estate.
06 / 15
DNA Helix
Pure CSS 
Alternating dots oscillate up and down in a staggered wave, mimicking the visual rhythm of a DNA double helix.
07 / 15
Liquid Blob
Pure CSS 
A gradient circle morphs its border-radius through organic blob shapes, creating a fluid, living feeling.
08 / 15
Orbit System
Pure CSS 
Two rings rotate at different speeds and directions around a central core, like a miniature solar system.
09 / 15
Signal Bars
Pure CSS 
Five bars of varying heights pulse in and out of opacity with a staggered delay, like an equaliser or signal indicator.
10 / 15
Clock Sweep
Pure CSS 
Two pseudo-element hands rotate at different speeds inside a circular face — a literal animated clock using only CSS.
11 / 15
Bouncing Chain
Pure CSS 
Four coloured dots bounce independently with staggered delays, creating a chain-like wave of movement.
12 / 15
Neon Ring Draw
Pure CSS 
A glowing ring spinner with a layered neon box-shadow creates a vivid electric glow as it spins.
13 / 15
Pixel Dissolve
Pure CSS 
A 4×4 grid of squares fade and shrink in a rolling wave, like pixels dissolving from a screen.
14 / 15
Hourglass Flip
Pure CSS 
A pure CSS triangle-based hourglass that flips 180° and pauses, then repeats — built from two border triangles.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
How do I create a loading animation in pure CSS?
Define a @keyframes rule for the motion, then apply it to an element with the animation property — set a duration and animation-iteration-count: infinite so it loops while content loads. A basic spinner is a circle with a partial border that rotates 360 degrees; richer loaders animate multiple elements, transforms and opacity. All 15 animations in this gallery are pure CSS — copy the @keyframes and markup straight from the code panel.
Can a loading spinner be made without JavaScript?
Yes — every loading animation here is 100% CSS, no JavaScript. CSS @keyframes and the animation property handle the entire loop. You add the loader to the page while data is loading and remove it when ready; the animation itself never needs JS.
What's the difference between a loading spinner and a skeleton loader?
A spinner is an abstract indicator — a rotating or pulsing shape that signals 'something is happening' without hinting at the content. A skeleton loader shows grey placeholder shapes in the layout of the real content (cards, lines of text, an avatar) so the page feels structured before data arrives. This collection includes both — for example the Listing Card Skeleton alongside spinner-style loaders.
How do I make a CSS loading animation smooth and not janky?
Animate only transform and opacity — they're GPU-accelerated and don't trigger layout. Avoid animating width, height, top or left. Use animation-timing-function (ease-in-out or a custom cubic-bezier) so the motion feels natural, and keep the loop duration steady. Every demo here follows this approach.
Are these CSS loading animations accessible and free to use?
Yes. Continuous motion honours the prefers-reduced-motion media query, so motion-sensitive users get a calm or static fallback; loaders should also be paired with an aria-live region or role=status so screen readers announce the loading state. All 15 animations are MIT licensed and free for commercial use.
Related collections
21 CSS Button Hover Effects
21
21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.
buttons hover animation
Responsive
27 CSS Card Hover Effects
27
27 original CSS card hover effects — elastic lift, 3D tilt, holographic shimmer, spotlight, aurora and more. Pure CSS with 4 vanilla JS enhancements. Copy-paste ready.
cards hover animation
Responsive
20 CSS Link Hover Effect Designs
20
20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.
css link hover link effects underline animation
Responsive