AI CSS Animations

CSS Spinners

88 pure CSS loading spinners: rings, arcs, dual rings, gradients and Material-style spinners. Each one is a single HTML + CSS snippet that scales from one size variable.

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

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

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

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

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

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

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

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

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

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

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

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

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

Material 3 Spinner with Track

The Material 3 circular indicator: an arc grows and shrinks while a faint track fills the rest of the ring, with a small gap at each end. Two SVG circles, both with pathLength set to 100.

spinner · ring · minimal

Double Ring Spinner

Two concentric arcs turning in opposite directions, the inner one faster and lighter. Busier than a single ring but still calm, and it is two SVG circles with one shared keyframe.

ring · spinner · tailwind

Comet Spinner

A round head dot leads a thin tail that fades to nothing, like a comet circling. The tail is a masked conic gradient on one pseudo element, the head is the other.

ring · spinner · gradient

Eclipse Spinner

A thin crescent sweeps around a faint disc, like the bright edge of an eclipse. The crescent is just an offset box-shadow on a rotating circle, so it is one element with no pseudo parts.

ring · spinner · minimal · tailwind

Circle Notch Spinner

A thick three quarter ring with rounded ends, spinning fast: the shape of the circle-notch icon and Bootstrap's border spinner. One SVG circle with a fixed dash, so it scales cleanly.

ring · spinner · minimal · icon · tailwind

Pie Spinner

A solid wedge sweeps round until the circle is full, then its trailing edge sweeps after it and empties it again. Two registered angle properties drive one conic-gradient.

spinner · progress · gradient

Camera Aperture Spinner

Six blades open and close a hexagonal hole while the iris twists, like a camera lens. Each blade is the same clip-path triangle rotated 60deg, so one keyframe animates all six.

spinner · shapes · icon

Yin Yang Spinner

A yin yang symbol turning with a slow start and a soft stop each revolution. Drawn as one SVG path with an even-odd hole for the inner dot, so both halves stay crisp on any background.

spinner · playful · shapes

Squircle Spinner

A dash stretches and snaps along a rounded square track instead of a circle. It suits app icons, avatars and square thumbnails, and the SVG rect uses pathLength to keep the dash math simple.

spinner · shapes · minimal

Activity Rings Loader

Three nested rings fill to different amounts one after another, hold, then rewind, like a fitness tracker. The colors are your accent hue-rotated, and pathLength sets how far each ring fills.

ring · progress · colorful

Draw and Erase Circle Loader

A stroke draws a full circle from 12 o'clock, pauses, then its tail chases round and erases it. Only stroke-dashoffset moves, on one SVG circle with pathLength set to 100.

ring · spinner · minimal

Snake Spinner

A thick head leads a body that tapers to a fine tail, slithering round the circle as it speeds up and slows down. Six stacked arcs share one eased keyframe, each a beat behind and a little thinner.

ring · spinner · playful

Wavy Circle Spinner

A wavy arc grows, shrinks and rotates, like the Material 3 Expressive indicator. The squiggle is one precomputed SVG path, and pathLength keeps the dash values in plain percentages.

ring · spinner · playful

Sci-Fi HUD Spinner

Four layered rings turn at their own speeds: a segmented rim, a tick scale, two heavy arcs and a dashed core around a blinking dot. Reads as scanning or booting, and every layer is plain SVG dashes.

ring · spinner

Elastic Arc Spinner

An arc jumps a quarter turn at a time and springs past each stop before settling, like a clock hand on a spring. Four keyframes share one overshooting cubic-bezier, so the bounce needs no extra steps.

ring · spinner · playful

Swinging Arc Loader

An arc swings through the bottom of a faint ring like a pendulum, stretching as it speeds past the middle and bunching up at each end. Less restless than a spinner for long waits.

ring · physics · minimal

Split Ring Spinner

A ring cracks into two halves that drift apart while it makes a half turn, then snap back together. The halves are the same bordered circle clipped with clip-path inset, one per side.

ring · spinner · shapes

Rainbow Arcs Loader

Three nested half circles flip over one after another, pausing between turns so the rainbow keeps folding into itself. The stagger is a single animation-delay driven by a --i custom property.

ring · spinner · playful

Donut Chart Loader

Three donut chart segments trade shares back and forth while the chart turns slowly, a natural placeholder for dashboards and reports. Each segment is an SVG circle with its own dash and offset.

ring · progress · colorful

Spinner to Checkmark Loader

An arc spins, closes into a full circle, pops, and draws a checkmark before fading and starting over. Use it to preview a save or upload flow; split the keyframes to trigger success for real.

spinner · ring · icon

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

Spiral Spinner

A spiral that turns steadily, so the line seems to pour endlessly toward the middle. Hypnotic in a good way for longer waits, and it is one precomputed SVG path on a linear rotation.

spinner · playful · minimal · tailwind

Pinwheel Spinner

Four two-tone paper blades whirl up to speed and coast to a stop each turn, like a pinwheel in gusts of wind. Every blade is the same clip-path triangle, rotated a quarter turn from the last.

spinner · playful · shapes

Spinning Beach Ball Loader

A glossy six-color wheel spinning under a fixed highlight, the busy cursor everyone recognises. The colors are your accent hue-shifted with relative color syntax, with a two-tone fallback.

spinner · colorful · gradient

Mirrored Arcs Spinner

Two arcs open from a single dot, sweep down either side of the ring and pinch back into a dot on the far side while the whole thing turns. One arc is the other mirrored with scaleX(-1).

ring · spinner · minimal

Gauge Loader

A speedometer arc revs up with an overshoot, holds near the red line, then drops back to zero. The needle and the fill share one timing curve, so they always agree on where the value is.

ring · progress · playful

Refresh Spinner

Two curved arrows chasing each other round, the refresh or sync icon set in motion. It turns a half circle at a time with a short ease at each end, which reads as retrying rather than waiting.

spinner · icon · minimal

Chasing Arcs Spinner

A long arc and a short one share the same ring at different speeds, so the short one keeps catching up, merging and pulling away again. Two SVG circles, no delays to tune.

ring · spinner · minimal

Combination Lock Spinner

Three notched rings scramble in different directions, then line up so the notches form one open channel and the centre lights, like a lock clicking open. Angles come from custom properties.

ring · spinner · playful

Avatar Loading Ring Spinner

Two arcs circle a placeholder avatar while the silhouette inside breathes, for profile pictures, chat heads and user cards that are still loading. The person glyph is drawn inline in the same SVG.

ring · spinner · skeleton

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

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

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

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

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

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

ASCII Line Spinner

One rounded bar ticks through | / - \ in eight hard steps, the command line spinner every terminal user knows. A plain rotation with steps(8) does it, so the Tailwind version is one class.

spinner · retro · minimal · tailwind

Crossing Lines Spinner

A single line splits into an X, closes again standing upright, then splits and lies back down. Two bars rotate in opposite directions with ease-in-out, pausing whenever they overlap.

spinner · minimal

Profile Skeleton

A profile card: cover banner with a cutout for the avatar, follow button, name, handle and stats. A story-style arc circles the avatar while one skewed sheen crosses the whole card.

skeleton · ring · gradient

Nested Squares Spinner

Three square outlines, one inside the next, each making a full eased turn a beat after the one around it, so the set twists into a spiral and unwinds. Stock animate-spin covers it in Tailwind.

spinner · shapes · minimal · tailwind

Hexagon Segments Loader

A hexagon cut into six wedges that grow out from the center one by one, then retract in the same order while the whole shape turns. Alternating shades give it a kaleidoscope look.

shapes · spinner

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

Doppler Effect Loader

A source glides back and forth sending out rings that bunch up ahead of it and spread out behind, the Doppler effect in miniature. Each ring is born where the source was at that moment.

pulse · ring · physics

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

Circle Bounce Loader

A ball ricochets around the inside of a ring at a constant angle, so its path closes into a faint five-pointed star, and the wall flashes where it hits. The trail is delayed copies.

physics · ring

Heartbeat Pulse Loader

A dot beats twice in quick succession, lub then dub, and each beat throws off a ring that fades as it spreads. Beats and rings share one 1.2s clock so they never drift apart.

pulse · ring

Rain Ripple Loader

Raindrops land at scattered spots on a puddle and each sends out a pair of flattened ripples. A wide, calm loader for empty states, with drop positions set inline.

pulse · ring · tailwind

Slinky Loader

Ten coils flip over a shared pivot one after another, arching like a slinky toy passed from hand to hand, then flip back. Each coil is an ellipse with a staggered delay.

physics · playful · ring

Aurora Ring Spinner

A ring painted with a three-hue conic gradient spins over a blurred copy of itself, so it glows in shifting color. The extra hues come from your accent via relative color syntax.

gradient · glow · ring · spinner · tailwind

Neon Sign Flicker Loader

A neon tube circle that buzzes on with a few sharp flickers, hums at full brightness, then cuts out. The unlit glass stays faintly visible, like a real sign with the power off.

glow · ring · retro

Frosted Glass Loader

Two colored blobs orbit behind a pane of frosted glass, crisp where they poke past the edge and soft behind it. Built on backdrop-filter, so it is glassmorphism in one small loader.

glow · gradient · spinner · colorful · tailwind

Breathing Glow Loader

A ring with a soft halo that swells and fades on a slow breath, like a sleeping laptop light. Suits idle, listening and waiting states where a spinning loader would feel too busy.

glow · pulse · ring · minimal

Holographic Disc Loader

A spinning disc with two rainbow fans sweeping across it, like light catching a CD. The fans are one conic gradient and the center hole is a radial mask, so it needs just one element.

gradient · colorful · spinner · 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

Sunburst Glow Loader

A glowing sun whose soft rays turn slowly and flare in time with the core. The rays are one repeating conic gradient faded by a radial mask; spin and flare use separate rotate and scale.

glow · gradient · spinner

Liquid Droplet Spinner

Four droplets circle a faint track at different speeds and melt into each other as they pass, then pinch apart again. An inline SVG goo filter in objectBoundingBox units makes the liquid necks.

physics · spinner · glow

AI Agent Steps Loader

A three-step task list for AI agents: a spinner walks down the rows and each step turns into a check as it finishes. Change the labels to your own tool calls.

ai · text · spinner · progress

Submit Button Loading Animation

The full loading state of a submit button: it presses, the label slides out, a spinner scales in at the same width, then the label returns. The button never changes size.

button · spinner

Stop Generating Button

The round stop button chat apps show while a reply streams: a rounded square in the middle, gently pulsing, with an arc spinning around the rim. Keeps an aria-label for screen readers.

ai · button · ring

Toggle Switch Loading State

A toggle that slides on, spins a small ring inside its knob while the change saves, then fills with color once it lands, and later flips back. For settings that need a server round trip.

button · spinner · inline

Loading Text with Spinning O

The word Loading where the letter o is a small ring spinner sitting on the baseline. Sized in em, so it matches whatever font size the surrounding text uses.

text · ring · inline · 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

Autosave Indicator Spinner

An inline 'Saving' status whose spinner turns into a check as the text rolls over to 'Saved', then back again. Built for editors and settings pages that save as you type.

inline · text · spinner

Search Input Loading Spinner

A real search input with a magnifier on the left and a small ring spinner at the right end while results load. Everything is sized in em from one font size, so it scales as a unit.

inline · spinner · minimal

Reconnecting Countdown Loader

A 'Reconnecting in 3s' pill where the number ticks down 3, 2, 1 while a tiny ring empties once per second. The digits are stepped content, the ring is one stroke-dashoffset.

text · ring · inline

Windmill Loader

A Dutch windmill with four latticed sails turning steadily above its tower. Each sail is a gradient lattice on one span, rotated into place with a --i variable.

playful · icon · spinner · tailwind

Hamster Wheel Loader

A hamster scurries on a spinning exercise wheel, legs blurring and body bobbing, for waits that are clearly somebody working hard. The rungs are a rotating dashed border.

playful · icon · spinner

How to use these css spinners

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.