CSS Loaders & Spinners
52 pure CSS loading animations you can paste into any project. Every loader is a single HTML + CSS snippet, respects reduced-motion, and can be recolored or resized with two CSS variables.
Ring Spinner
The classic single-element CSS spinner: a faint circular track with one colored arc that rotates. One div, one keyframe, works everywhere.
ring · spinner · minimal · tailwind
Dual Ring Spinner
Two opposing arcs spin around an invisible track. A slightly more energetic take on the ring spinner that still needs only a single element.
ring · spinner
Dashed Ring Spinner
A dashed circular border that rotates slowly. Reads as 'working' without the urgency of a solid arc, so it suits background sync and autosave indicators.
ring · spinner · subtle
Gradient Ring Spinner
A conic gradient masked into a ring, so the arc fades from transparent to full color like a comet tail. Modern, single element, no extra markup.
ring · spinner · gradient
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
Bars Loader
Five vertical bars stretch and shrink like an audio equalizer. Great for media players, voice input, and anything that is 'processing' rather than 'fetching'.
bars · audio
Ripple Loader
Two rings expand outward and fade, like drops hitting water. A calm, spacious loader for empty states and full-screen waits.
ring · subtle
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
Orbit Loader
A small planet circles a faint orbit ring. Playful without being loud, and it stays readable at very small sizes.
ring · playful
Spokes Spinner
Eight rounded spokes fade in turn around a center point, the pattern iOS and macOS use for activity indicators. Rotation is faked with opacity, so it is very cheap to render.
spinner · ios · minimal
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
Morphing Square Spinner
A square rotates while its corners round off into a circle and back. Two properties, one keyframe, and a lot of personality.
shapes · playful
Cube Grid Loader
A three-by-three grid of squares that collapse and reappear in a diagonal sweep. Dense and satisfying, best at medium sizes where the grid is legible.
shapes · grid
Four Squares Loader
Four rounded squares orbit a shared center while each one breathes in and out. Feels like a logo mark coming together, so it works well as a brand loader.
shapes · playful
Skeleton Shimmer
Three placeholder lines with a light band sweeping across them. The skeleton screen pattern: show the shape of the content before the content arrives.
skeleton · placeholder · subtle · tailwind
Indeterminate Progress Bar
A thin track with a bar that slides across it endlessly. Use it when you have no idea how long the wait is, at the top of a page or under a form.
bars · progress · minimal
Bouncing Ball Loader
A ball drops onto a soft shadow, squashes, and springs back up. A little Disney squash-and-stretch goes a long way toward making a wait feel shorter.
playful · shapes
Clock Loader
A clock face whose hands sweep round at different speeds. A literal metaphor that suits scheduling, timers, and 'this may take a minute' waits.
playful · ring
Heartbeat Loader
A CSS-drawn heart that beats with a double thump. Built from two rotated pseudo-elements, no SVG or icon font required.
playful · shapes
Hourglass Loader
Two triangles form an hourglass that pauses, then flips with a quick spin. The pause is what sells it, so keep the timing if you retint it.
playful · shapes
Loading Text with Animated Dots
The word 'Loading' followed by three dots that appear one at a time. Change the text to anything: Saving, Thinking, Generating.
text · inline · minimal
Button with Loading Spinner
A disabled button with a small spinner beside its label, for form submits and 'Save' actions. The spinner inherits the button's text color so it works on any brand color.
button · spinner · inline · tailwind
Full Page Loading Overlay
A translucent, blurred overlay with a spinner and a message, for the moment between a route change and its data. Swap absolute for fixed to cover the whole viewport.
overlay · spinner · page
Top Page Loading Bar
The thin glowing bar that runs along the top of the page while a route loads, the way YouTube and GitHub do it. Swap absolute for fixed to pin it to the viewport.
bars · progress · page · minimal
Material Design Spinner
The Android and Google-apps spinner: an arc that grows and shrinks while the whole ring rotates. An SVG circle with an animated dash, styled entirely from CSS.
spinner · ring · material · svg
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
Circular Progress with Percentage
A ring that fills clockwise while the number in the middle counts up to 100%. The counter is pure CSS using a registered custom property, so there is no JavaScript to wire up.
progress · ring · text
Skeleton Card
A card-shaped placeholder with an avatar, two lines of text and an image block, all shimmering. Drop it in wherever a feed item, product card or comment is about to appear.
skeleton · placeholder · subtle · tailwind
AI Thinking Shimmer Text
A band of light sweeps through the word 'Thinking…', the status line every AI chat app shows while a model is working. Text stays selectable and screen-reader friendly.
text · ai · inline · subtle
Blinking Cursor
A block cursor blinking after a word, the terminal-style 'waiting for output' signal that streaming AI interfaces have adopted. Uses steps() so the blink is crisp, not a fade.
text · ai · inline · minimal
Neon Glow Spinner
A half ring with a soft outer glow and an inner bloom, like a neon tube. Best on a dark background, where the glow has somewhere to go.
ring · spinner · glow · dark
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
Newton's Cradle
Five hanging balls where the outer ones swing out and knock back in, one side then the other. A desk-toy loader for pages that want a little wit.
playful · physics
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
Liquid Fill Loader
A circle slowly fills with liquid whose surface rocks like real water. Two rotating rounded squares, clipped by the circle, make the wave.
ring · playful · physics
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
Radar Sweep
A sweeping beam circles a ringed radar screen and lights up a blip as it passes. A natural fit for search, scanning, syncing and 'looking for devices' states.
ring · scan · playful
Gear Spinner
A single toothed gear turning steadily. Drawn with a repeating conic gradient and a radial mask, so it stays razor sharp at any size and needs no icon.
shapes · spinner · settings
Infinity Loader
A stroke chases itself around an infinity symbol on top of a faint track. The SVG path uses pathLength so the dash math is in round numbers.
svg · minimal · shapes
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
Pac-Man Loader
A chomping Pac-Man eats a trail of dots that drift toward its mouth. Two rotating half-circles and three fading dots, all CSS.
playful · retro
Solar System Loader
A glowing sun with two planets on faint orbits, spinning at different speeds and in opposite directions. Slow and calm enough for a long wait.
ring · playful · science
Wave Text Loader
The letters of 'Loading' hop one after another in a wave. One span per letter, one keyframe, staggered delays. Swap the letters for your own word.
text · playful
Battery Charging Loader
A battery outline that fills from empty to full, then resets. Good for uploads, installs and anything with a clear 'done' at the end.
progress · playful · shapes
Color Cycling Spinner
A spinner whose color slides through the whole spectrum as it turns, using a hue-rotate filter on top of your accent color. Set the accent and it cycles from there.
ring · spinner · colorful
Wi-Fi Signal Loader
Three signal arcs light up outward from a dot, over and over, the universal 'connecting…' symbol. Good for reconnect states, pairing and network checks.
network · shapes · minimal
Segmented Loading Wheel
Twelve segments arranged in a ring, advancing one tick at a time with steps() instead of gliding. A mechanical, clockwork feel that suits dashboards and dev tools.
ring · spinner · minimal
How to use these CSS 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 SVG. 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.