Loaders & patterns 6 CSS 3D effects

Loaders & patterns

Flipping loader

Pure CSS

The classic square loader: half a turn on X, then half a turn on Y.

Loaders & patterns

Gyroscope

Pure CSS

Three nested rings, each spinning on a different axis — the rotations compound.

Loaders & patterns

DNA helix

Pure CSS

Rungs spin on negative delays; dots counter-rotate so they always face the camera.

Loaders & patterns

Tile wave

Pure CSS

A 4×4 grid of two-sided tiles flipping in a diagonal wave.

Loaders & patterns

Wave grid

CSS + JS

JS builds the grid and gives each cell its distance from the centre; CSS turns that into a ripple.

Loaders & patterns

Ripple flip

CSS + JS

Click any tile: every tile flips, delayed by its distance from the one you clicked.