CSS 3D Loaders

30 3D loading animations built with CSS transforms: rotating and folding cubes, pyramids, flipping tiles and perspective spinners.

Flipping Square

A square flips over on the X axis, then the Y axis, with a little perspective. The 'rotating plane' from SpinKit, in one element.

shapes · 3d

3D Rotating Cube

A real six-faced cube turning in 3D space with translucent faces, so you can see the back edges through the front. Uses preserve-3d and a perspective on the parent.

3d · shapes

Coin Flip Loader

A coin with a rim and a highlight, flipping on its vertical axis with perspective. Natural for payments, checkout and anything that involves money.

3d · playful · shapes

3D Flipping Dots Loader

Four dots flip on their vertical axis one after another, turning from solid to hollow ring and back again. Each dot has two faces with backface-visibility hidden, like a row of tiny coins.

dots · 3d

Carousel Dots Loader

Three dots ride a flat carousel: they swell and come forward as they pass left to right in front, then shrink and dim on the way back behind. A sine x-axis plus a cosine depth keyframe.

dots · 3d · minimal

Dot Tunnel Loader

Rings of dots rush toward you out of a vanishing point and twist as they pass, like flying down a tunnel. Each ring is a dotted border, so the dots grow with perspective for free.

dots · 3d

3D Flip Bars Loader

Five bars flip over on their vertical axis one after another, showing a solid face and then a pale back, like a row of dominoes turning. Built with preserve-3d and backface-visibility.

bars · 3d

Twisting Ribbon Loader

Sixteen thin bars turn on the horizontal axis with a phase offset, so together they read as a ribbon twisting in 3D, solid on the front and pale on the back. One linear keyframe, sixteen delays.

bars · 3d

Folding Cube Loader

Four tiles of a diamond fold into place one after another, hold, then fold away in the same order. The SpinKit classic, built from rotateX and rotateY with per-tile perspective.

shapes · 3d

3D Pyramid Loader

A four-sided pyramid turning slowly in 3D, each face a clip-path triangle tilted on its base edge. Opaque faces in stepped shades of the accent, so it reads as solid without any lighting math.

3d · shapes

Stacked Layers Loader

Three isometric plates stacked like a layers icon lift in a wave from the bottom up, the top one highest, so the stack fans open and settles. Plate edges are a drop-shadow on a clip-path diamond.

3d · shapes

Rubik's Cube Loader

A 3D puzzle cube whose top, middle and bottom layers twist a quarter turn in sequence. Each layer is a preserve-3d slab of five faces; the tile grid is a repeating gradient, not extra elements.

3d · shapes · playful

Checkerboard Flip Loader

A four by four checkerboard whose tiles flip over in a diagonal wave, swapping solid and pale squares, then flip back. Two-sided tiles use backface-visibility on a pair of pseudo-elements.

3d · shapes

Isometric Grid Wave Loader

Sixteen blocks on an isometric floor rise and sink in a wave that rolls from the back corner to the front. Each block is one tile plus two pseudo-element sides inside a preserve-3d grid.

3d · shapes

Tumbling Cube Loader

An isometric cube hops, stretching on take-off and squashing on landing, and tumbles a third of a turn in the air so its three shaded faces trade places. One hexagon clip-path with a conic-gradient.

3d · shapes · physics

Origami Fold Loader

A paper diamond folds in half across one diagonal, opens, then folds across the other, showing its paler back while folded. Each quarter is two-sided through backface-visibility.

3d · shapes

Wireframe Cube Loader

A wireframe cube tumbles on two axes while a smaller tinted cube inside turns the opposite way, like a tesseract sketch. Edges are borders on transparent faces in one preserve-3d scene.

3d · shapes

Unfolding Cube Loader

A cube on a turning floor opens flat into its cross-shaped net, then folds back up with the lid closing last. Each side hinges on its own edge through transform-origin inside one preserve-3d floor.

3d · shapes

Assembling Cube Loader

The three visible faces of an isometric cube fly in from three sides, lock together with a small pop, then drift apart and fade. Three clip-path rhombuses share one box, so no 3D context is needed.

shapes · 3d

Card Stack Loader

Three cards stacked in perspective: the front card swipes away, the others step forward, and it slides back in at the rear. translateZ supplies the depth, so cards shrink with distance for free.

3d · shapes

3D Tile Ring Loader

Eight tiles stand in a tilted 3D ring that turns while a wave runs around it, lifting each tile in turn. Tiles show pale backs as they pass behind; the wave rides on the separate translate property.

3d · shapes · spinner

Saturn Loader

A shaded planet inside a tilted, spinning ring that passes behind it at the top and in front at the bottom. Real 3D: the ring and planet share one preserve-3d scene.

orbit · 3d · playful

Gyroscope Loader

Three rings of shrinking size tumble around a still core, each on its own axis and at its own speed, like a gimbal. Plain rotateX inside a rotated frame, with perspective.

3d · ring · physics

Gravity Well Loader

A ball spirals down a funnel drawn in perspective, speeding up as the orbit tightens, then drops through the hole. The funnel's depth follows 1/r, like a gravity well diagram.

orbit · physics · 3d

Binary Star Loader

A heavy star wobbles while a small companion circles it on a tilted orbit, crossing in front and then slipping behind. Depth comes from synced scale and z-index keyframes.

orbit · physics · 3d

Neon Cube Loader

An isometric wireframe cube built from neon tube, with two bright pulses racing along its edges and through the inner corner. One SVG path drawn three times: dim tube, glow and hot core.

glow · 3d · retro

3D Sphere Loader

A glossy ball floats above its shadow while the light circles around it, so the highlight sweeps the surface and the shadow swings the opposite way. Two rotating gradient layers, no 3D transforms.

3d · gradient · glow

Hologram Loader

A wireframe globe spins in a cone of light above a projector, with scanlines rolling through it and the odd glitch. Meridians are ellipses squeezed with scaleX, so there is no 3D transform at all.

glow · 3d · retro

Split Flap Text Loader

LOADING spelled on split-flap tiles, like an airport departure board: each tile's top flap falls and the bottom flap snaps into place, rippling left to right. Letters come from a data attribute.

text · retro · 3d

Flipping Book Loader

An open book whose pages turn from right to left, one after another in a steady rhythm. Pages rotate in 3D around the spine with rotateY, so it needs no images or JavaScript.

playful · icon · 3d

How to use these 3d loaders

Open any loader, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no icon fonts, no image files. Each loader's classes are prefixed with its own name so several can share a page.

To change the color, set --ldr-color on the loader or any ancestor. To change the size, set --ldr-size. Everything inside scales from those two values, so a 16px inline spinner and a 96px page loader are the same snippet.

Every snippet ships with a prefers-reduced-motion rule that slows the animation for people who have asked their OS for less motion. Keep it.