CSS Dot Loaders

52 CSS dot loaders: bouncing three-dot loaders, typing indicators, dot spinners, waves and grids. The loading animation most people picture, in every variation.

Bouncing Dots Loader

Three dots bounce up and down in a staggered rhythm. The friendliest loader in the set, and the one most people picture when they say 'loading dots'.

dots · playful · tailwind

Pulsing Dots Loader

Three dots grow and shrink in sequence. Calmer than bouncing dots because nothing changes position, only scale.

dots · subtle

Flashing Dots Loader

Three dots fade in and out one after another. Nothing moves or resizes, which makes this the safest dots loader for dense UI and tiny inline spots.

dots · minimal · inline · tailwind

Typing Indicator

The chat-app 'someone is typing' bubble: three small dots lifting in turn inside a rounded pill. Use it for streaming AI responses and message threads.

dots · chat · inline · tailwind

Wave Dots Loader

Five dots ripple upward in a smooth sine-like wave. A wider, more graceful sibling of the bouncing dots that fills a horizontal space nicely.

dots · playful

Pulse Loader

A solid dot that throbs while a soft halo expands away from it. The 'ping' pattern from status indicators, turned into a loader.

dots · subtle · minimal · tailwind

Windows Style Dots Spinner

Five dots chase each other around a circle, bunching up on the slow side and spreading out on the fast side, the way the Windows boot and loading indicator does.

spinner · dots · windows

DNA Helix Loader

Two strands of dots weave past each other, shrinking as they pass behind and growing as they come to the front. Eight columns, two pseudo-elements each, no SVG.

dots · science · playful

Gooey Blob Loader

Three blobs stretch apart and snap back together like mercury, using an SVG goo filter that works on any background. The filter is inline, so it still needs no external assets.

dots · playful · physics · svg

Circle Dots Spinner

Eight dots around a circle swell and fade in sequence, giving a rotation without anything actually rotating. Very cheap to render and reads well even at 16px.

dots · spinner · minimal

Dot to Dash Ring Spinner

Eight round dots stretch into long dashes until the ring almost closes, then shrink back to dots, all while turning. A zero length dash with round caps is what draws each dot.

ring · spinner · dots

Dot Spinner

Eight dots in a circle, each a little smaller and fainter than the one ahead, rotating as one so the ring reads as a comet with a tail. Sizes are set once and only the wrapper spins.

dots · spinner · tailwind

Elastic Dot Loader

A dot travels along a row of faint stops by stretching into a pill toward the next one and snapping its tail after it. One clip-path inset animates, so the ends stay perfectly round.

dots · playful · minimal

Shuffling Dots Loader

Three dots trade places like a shell game: one arcs over the top while its partner ducks underneath. Six swaps bring every dot home, and sine easing on each axis keeps the arcs round.

dots · playful

Morphing Dots Loader

Eight dots lying in a line curl up into a ring, spin half a turn, then straighten out again. Every dot reads its line and ring positions from custom properties in the markup.

dots · shapes

Leapfrog Dots Loader

The back dot crouches, springs over the other two and lands at the front with a squash while they shuffle along underneath. A tiny conveyor of hops that never drifts off center.

dots · playful · physics

Splitting Dots Loader

One dot splits into two, the two split into four, and all four snap back into one while the group turns a quarter. Four stacked dots read their split direction from --x and --y signs.

dots · playful · shapes

Colliding Dots Loader

Two dots speed toward each other, squash flat against the contact point, and fly apart again, with a faint shock ring at every hit. The squash is anchored on the side that touches.

dots · physics · playful

Spiral Dots Loader

Ten dots set along a spiral arm all spin with the same eased turn, a few hundredths of a second apart, so the arm winds tighter and loosens again on every lap.

dots · spinner · tailwind

Dot Burst Loader

Eight dots get sucked into the center, charge up into one swelling dot, then burst back out past their ring with an overshoot. The ring drifts an eighth of a turn every cycle.

dots · pulse · playful

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

Pendulum Wave Loader

Six pendulums of different lengths swing from one pivot, each a little slower than the one above, so the dots drift through waves and snakes and line back up every 9.6 seconds.

dots · physics · minimal

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

Ellipsis Loader

The written ellipsis as a loader: dots pop in one at a time with a small overshoot, sit as a full '...', then float up and fade in the same order before the count starts again.

dots · minimal · inline

Chasing Dots Spinner

Two dots on opposite sides of a turning frame take turns swelling to full size and shrinking to nothing, so they seem to chase each other around. The SpinKit classic with sine easing.

dots · spinner

Tumbling Dots Loader

Two dots walk by vaulting over each other in turn, each one pivoting on its partner's center, while the row drifts back so the pair stays put. Two rotate keyframes and a linear drift.

dots · playful · physics

Dot Grid Ripple Loader

A five by five dot matrix where a pulse spreads from the center dot outward in rings, each dot swelling as the wave passes. Delays come from each dot's real distance to the middle.

dots · pulse

Snake Dots Loader

A four-dot snake steps through a four by four grid of faint dots on a path that visits every cell, just like the old phone game. steps() timing keeps every move a clean jump.

dots · retro · playful

Stacking Dots Loader

Three dots fall in one at a time and settle into a cannonball pyramid, then shrink away together. clamp() on each dot's --i decides which dots have landed, so all three share keyframes.

dots · physics · playful

Trampoline Dot Loader

A dot drops onto a taut line, sinks it into a V as it squashes, and gets flung back up while the line wobbles flat. Each half of the line is a pseudo-element hinged at its outer end.

dots · physics · playful

Figure Eight Dots Loader

A head dot and five fading followers loop an upright figure eight. The path is a 1:2 Lissajous curve made from two sine-eased axes, so no SVG path or offset-path is needed.

dots · minimal

Shuttle Dots Loader

Five dots shuttle from one end to the other: the lead dot leaves first, the rest string out behind it, and they bunch up in order at the far end before heading back.

dots · playful · physics

Jelly Dots Loader

Three dots sit on a shared baseline and jiggle like jelly one after another: a squash, a stretch and a few smaller wobbles that settle. Pure scale, anchored at the bottom edge.

dots · playful

Triangle Dots Loader

Three dots sit on the corners of a triangle and all slide to the next corner together, shrinking in transit and settling with a short hold. Reads as rotation, but every path is a straight edge.

dots · spinner · shapes

Popping Dots Loader

Three dots slowly inflate like bubbles, overstretch, and pop into a thin ring that spreads and fades, one after another. The fill and the ring are the two pseudo-elements of each dot.

dots · playful · pulse

Dot Circle Fill Loader

Twelve faint dots around a circle light up one by one with a little pop until the ring is full, then go dark in the same order. A countdown feel that suits timed waits and retries.

dots · spinner

Marching Dots Loader

Dots enter from nothing on the left, swell to full size in the middle and shrink away on the right, a steady conveyor with no start or end. Position is linear; only the size is eased.

dots · minimal

Sunflower Dots Loader

Twenty-four seeds bloom outward on the golden angle, like the center of a sunflower, then fade from the middle out while the head slowly turns. Each dot's radius comes from a --r value in the markup.

dots · playful

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

Binary Counter Loader

Four dots count from 0 to 15 in binary, each bit flipping at half the rate of the one to its right. steps() timing gives the hard on and off of real LEDs and the loop is exactly one count.

dots · retro · minimal

Rotating Dots Loader

Three dots in a row, the middle one larger, spin a full turn with a strong ease so they whip around and rest flat for a beat. A single keyframe on the wrapper; the dots themselves never animate.

dots · spinner · tailwind

Rolling Wheel Cycloid Loader

A wheel rolls along a moving road while a point on its rim leaves a trail of dots that draws the cycloid arch. Every trail dot is the rim point from a moment ago, shifted back by the road.

physics · dots

Plinko Loader

Balls drop into a triangle of pegs and hop left or right off each row before settling in a slot at the bottom, like a Galton board. Three balls, three paths, one 2.4s clock.

physics · playful · dots

Juggling Balls Loader

Three balls in a real juggling cascade: each flies a parabola to the other hand, gets scooped and thrown back, with a throw every sixth of the cycle. Nested translates, no SVG.

physics · playful · dots

Foucault Pendulum Loader

Seen from above, a pendulum swings while its plane slowly turns, knocking over the ring of pins one by one before they pop back up. Pin delays are timed to the exact swing.

physics · dots · orbit

Epicycle Orbit Loader

A moon rides a small circle whose center rides a big one, like Ptolemy's epicycles, tracing a three-lobed loop with a fading trail. Just two nested rotations per dot.

orbit · dots · tailwind

Box Shadow Glow Spinner

Eight glowing dots from one empty div: each dot is a box-shadow offset around the center, the leading two carry a blurred glow, and the element turns in eight clicks. No pseudo-elements.

glow · dots · spinner · minimal · tailwind

Fireflies Loader

Six tiny glowing points wander on their own looping paths and blink in and out, like fireflies at dusk. Paths share one keyframe scaled by per-dot custom properties, so each flight looks different.

glow · dots · playful

Neural Network Loader

Three layers of nodes wired together: each layer lights up and sends small pulses along its connections to the next. One SVG, and the pulses are just a moving stroke dash.

ai · dots · shapes

iMessage Style Typing Bubble

A rounded chat bubble with a two-circle tail and three dots that darken in turn, while the bubble itself breathes. The fade-in-place dots are the iOS take on 'is typing'.

dots · pulse · minimal

Button with Loading Dots

A button whose label is swapped for three white dots hopping in turn, the pattern chat and payment forms use while a request is out. Keeps an aria-label so it still has a name.

button · dots · tailwind

Braille Dots Spinner

The braille dot spinner from command line tools: ten frames of dots chasing around a tiny grid, next to a muted label. The frames are real characters, so it inherits your font size.

text · retro · spinner · dots

How to use these dot 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.