Loading animations that make waiting worth it

The liquid is a gradient div whose height is bound to the percentage, so it rises as loading progresses.

An SVG wave sits on top of the liquid and scrolls sideways on a loop for the sloshing crest.

Bubbles are small circles animated upward with staggered delays; the percentage text uses mix-blend so it stays readable over the liquid.

Each particle eases toward a target point on a hexagon ring; the easing gives a springy snap-into-place.

Particles close together are joined by faint lines, so the shape reads as a connected structure.

On a timer the targets switch between the shape and random positions, so it assembles and scatters forever.

Each star has a 3D depth (z); every frame z decreases so the star rushes toward the viewer.

The star is projected to 2D with perspective, and drawn as a line from its previous to current position, which stretches into a streak as it speeds up.

Stars that pass the camera respawn far away, so the field never empties.

The blob's outline is a circle whose radius is perturbed by several sine waves at different frequencies, giving an organic, ever-changing edge.

The base radius scales with the percentage, so the blob visibly grows as loading progresses.

A canvas shadow adds a soft glow, and the percentage counts up in the center.

Each trace is an SVG path animated with stroke-dasharray/offset, so a lit segment flows along the wire like current.

A blur filter on the lit stroke creates the electric glow.

Nodes are circles that pulse brighter on a delay timed to when the current arrives. It's pure SVG + CSS, no JavaScript.