CSS Loading Animations Playground

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.

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`.

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.

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.

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.

Alternating dots oscillate up and down in a staggered wave, mimicking the visual rhythm of a DNA double helix.

A gradient circle morphs its border-radius through organic blob shapes, creating a fluid, living feeling.

Two rings rotate at different speeds and directions around a central core, like a miniature solar system.

Five bars of varying heights pulse in and out of opacity with a staggered delay, like an equaliser or signal indicator.

Two pseudo-element hands rotate at different speeds inside a circular face — a literal animated clock using only CSS.

Four coloured dots bounce independently with staggered delays, creating a chain-like wave of movement.

A glowing ring spinner with a layered neon box-shadow creates a vivid electric glow as it spins.

A 4×4 grid of squares fade and shrink in a rolling wave, like pixels dissolving from a screen.

A pure CSS triangle-based hourglass that flips 180° and pauses, then repeats — built from two border triangles.

An SVG heartbeat waveform scrolls horizontally in a continuous loop — an inline data URI with a CSS translateX animation.