CSS Loaders & Spinners
322 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
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
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
Music Equalizer Loader
Five bars bounce from a shared baseline at their own tempo, like a now playing icon. Every bar runs the same keyframes at a different duration, so the pattern never visibly repeats.
bars · playful
Sound Wave Loader
Nine rounded bars shaped like a voice waveform, pulsing outward from the tallest bar in the middle. Suits voice input, calls and audio processing. The stagger comes from one --d distance variable.
bars · minimal
ECG Heartbeat Line Loader
A heart monitor trace: a bright segment with a softer tail runs along an ECG line with one sharp beat. Drawn in SVG with stroke-dasharray and pathLength, so the timing survives any resize.
pulse · minimal
Barcode Scanner Loader
A laser line sweeps up and down a barcode framed by viewfinder corners. Good for scan, lookup and checkout states. The stripes are one hard-stop gradient and the corners are eight more.
bars · icon
Knight Rider Scanner Loader
A glow slides back and forth along a row of LED segments, the 80s car scanner look. The segments are a repeating-gradient mask, so one moving pseudo-element lights all of them.
bars · retro · glow
Audio Waveform Loader
A static waveform of rounded bars fills with color from left to right like a voice message playing, then fades back. One SVG clipPath holds the bars, one scaled rect does the fill.
bars · progress
Signal Strength Loader
Four rising bars fill from the bottom one after another, then drain in the same order, the phone signal icon searching for reception. Good for connect, sync and reconnect states.
bars · icon
Bar Chart Loader
Four chart bars spring up from an axis with a little overshoot, hold, then drop away and grow again. A natural fit for dashboards, reports and analytics panels while data loads.
bars · icon
Jumping Bars Loader
Four short bars take turns crouching, leaping and landing with a squash, like a row of springy characters. Anticipation and follow-through are baked into one keyframe set.
bars · physics · playful
Wavy Line Loader
A thick sine squiggle scrolls sideways and fades out at both ends, the wavy indicator style of newer Material designs. The SVG shifts by exactly one wavelength per loop, so it never jumps.
minimal · inline
Code Lines Loader
Indented lines of code tokens type themselves in, chunk by chunk, behind a caret that blinks once the block is done. One stepped clip-path polygon does the typing, no per-line timers.
bars · skeleton
Square Line Chase Loader
A line one side long chases itself around a faint square track, speeding up along each edge and easing into the corners. Four bars share one clip-path keyframe, each rotated a quarter turn.
shapes · minimal
3D Flip Bars Loader
Five bars flip over on their vertical axis one after another, showing a solid face and then a pale back, like a row of dominoes turning. Built with preserve-3d and backface-visibility.
bars · 3d
VU Meter Loader
Two segmented LED columns jump between levels like a stereo VU meter. The segments are a repeating-gradient mask and the level is a stepped clip-path, so it moves in whole LEDs.
bars · retro
Tally Marks Loader
Four slightly crooked strokes are drawn one by one, a fifth slashes across them, then the group fades and starts over. A hand drawn way to say counting, good for queues and batch jobs.
bars · playful
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
Rotating Lines Grid Loader
A three by three grid of short dashes, each spinning a full turn in a diagonal wave from the top left corner. Uses the stock spin keyframes with strong easing, so it ports to Tailwind as is.
bars · 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
Morse Code Loader
Dashes and dots print across a line in real Morse timing, spelling OK, then fade and send again. A registered @property counter drives every symbol, so a dash takes three times as long as a dot.
retro · playful
Radio Tuner Loader
A needle glides along a dial of tick marks, overshoots a little like a mechanical pointer, and flashes each time it locks onto a station. Good for search, scan and connect states.
bars · retro
Sine Wave Bars Loader
Twelve short bars ride a traveling sine wave, stretching as they pass the middle where they move fastest. Sine easing on each quarter keeps the curve smooth; the phase comes from one --i index.
bars · minimal
Piano Keys Loader
Five white keys light up and dip in an ascending run while the black keys sit on top, a tiny piano playing a scale. Suits music apps and anything creative; the black keys use a currentColor mix.
bars · playful
Plucked String Loader
A taut string between two posts is pulled up, released and rings out in a fading vibration before the next pluck. Each segment reads its own sine and cosine factors, which keeps the curve smooth.
physics · minimal
Pong Loader
Two paddles rally a square ball across a dashed net, each sliding into place just in time for the return. The four-shot rally repeats without a jump; sine easing makes the paddles feel human.
retro · playful
Twisting Ribbon Loader
Sixteen thin bars turn on the horizontal axis with a phase offset, so together they read as a ribbon twisting in 3D, solid on the front and pale on the back. One linear keyframe, sixteen delays.
bars · 3d
Stack Shuffle Loader
Three lines step down a slot at a time: the bottom one slides out, a fresh one slides in on top, and each line dims as it ages. Reads as a feed or list refreshing. One keyframe, three offsets.
bars · minimal
Sorting Bars Loader
Four bars of different heights swap places pair by pair until sorted, bounce once, then fade and start unsorted again. A nod to algorithm visualizers, good for dev tools, search and data jobs.
bars · playful
Folding Zigzag Loader
A straight line folds up into a tight zigzag from both ends toward the middle, like a carpenter's ruler, then springs flat again. Each joint is a nested bar that rotates relative to its parent.
bars · playful
Line Chart Loader
A trend line draws itself across a chart, the area under it fills in and a marker pops on the last point. Made for dashboards and finance views; pathLength keeps the draw size independent.
icon · minimal
Chevron Arrows Loader
Three chevrons light up and nudge forward one after another, pointing the way. Useful for next step, redirect and continue states. Each chevron is two borders of a rotated square with a rounded tip.
icon · minimal
Material Linear Progress Bar
Google's indeterminate linear indicator: two segments chase across the track, each stretching and shrinking on the Material easing curves. Transform only, so it stays smooth.
progress · bars · minimal
Striped Progress Bar
A rounded bar with diagonal stripes that scroll forward while the fill creeps up in uneven steps, like a real install. The fill is revealed with clip-path, so the stripes never stretch.
progress · bars · retro
Percentage Progress Bar
A linear bar whose percentage rides above the fill in a small tooltip, counting from 0 to 100%. The number is pure CSS: a registered @property feeds both the counter and the fill.
progress · bars · text
Stepper Progress Bar
Four steps joined by connectors that fill one after another; each step pops as it becomes current and turns into a check once it is done. One registered @property drives every state.
progress · icon · minimal
Video Buffering Progress Bar
A video scrubber: the buffered range jumps ahead in chunks while the played range and its knob follow at a steady speed, stalling whenever they catch up. Good for media and download UIs.
progress · bars
List Skeleton
Three list rows, each with an avatar, a name, a subtitle and a trailing button, pulsing one after another from top to bottom. The stagger is just an animation-delay per row.
skeleton · pulse · minimal · tailwind
Article Skeleton
A headline, byline and paragraph drawn on a single empty div: the layout is a stack of mask layers, and one gradient band slides behind it, so the shine only lands on the bones.
skeleton · gradient · minimal
Product Grid Skeleton
Three product cards with image, title, price and cart button. One mask gradient on the wrapper sweeps a single bright wave across all of them at once, instead of a shimmer per box.
skeleton · gradient
Table Skeleton
A data table placeholder with a header, checkboxes, names, status pills and right-aligned amounts. Each cell brightens on a delay of row plus column, so a diagonal wave rolls across the grid.
skeleton · pulse
Video Card Skeleton
A 16:9 thumbnail with a play glyph and duration badge, then avatar, two title lines and channel name. A diagonal highlight slides across every bone using transform only, so it stays cheap.
skeleton · gradient · icon
Gradient Progress Bar
A fill that slides in, holds, then sweeps off while a multi-hue gradient flows through it. The hues are rotated from your accent with relative oklch colors, with a color-mix fallback.
progress · gradient · colorful
Segmented Progress Bar
Ten separate blocks light up one at a time with a small springy pop, hold full for a beat, then switch off in the same order. Each block is one span with an --i index for its delay.
progress · bars · minimal
Glowing Progress Bar
A thin bar that fills in uneven bursts behind a bright glowing head, which flares when it reaches the end. The head is one element with a static glow that only moves by transform.
progress · glow · bars
Shimmer Progress Bar
A squared-off install bar that steps forward with a slight spring while a band of light keeps running through the filled part, the way desktop installers show they are still alive.
progress · bars · retro
Wavy Progress Bar
The Material 3 expressive indicator: the filled part is a squiggle that keeps flowing, the rest is a flat track ending in a stop dot. The wave is one SVG path sliding by a wavelength.
progress · bars · playful
Chat Skeleton
Incoming and outgoing message bubbles pop in one after another from their tail corner, then clear out oldest first. Outgoing bubbles use a stronger tint so the two sides read at a glance.
skeleton · playful
Image Gallery Skeleton
A bento photo grid of tiles, each marked with a small mountain-and-sun image glyph, that twinkle on their own offsets and speeds instead of one uniform shimmer. Good for galleries and media pickers.
skeleton · pulse · icon · tailwind
Dashboard Skeleton
Three KPI cards over a chart panel. The numbers shimmer card by card while a placeholder line chart draws itself with stroke-dashoffset and its area fades in underneath, then resets.
skeleton · gradient
Form Skeleton
Two labelled inputs, a checkbox row and a full-width button, breathing with the same curve as Tailwind's animate-pulse. A caret blinks in the first field so it reads as a form, not just boxes.
skeleton · pulse · minimal · tailwind
Comment Thread Skeleton
A comment, two indented replies hanging off a curved thread line, and a second comment. The shimmer starts one step later on each comment, so it visibly flows down the thread.
skeleton · gradient
Stacked Progress Bar
A storage usage bar: four colored categories are measured in one at a time, pausing at each boundary, above a matching legend. The hues are rotated from your accent with relative oklch colors.
progress · colorful · bars
Bouncing Dot Progress Bar
An indeterminate pill track with a dot that rallies from wall to wall, stretching as it speeds through the middle and squashing flat against each end, with a faint echo trailing behind.
progress · physics · playful
Liquid Progress Bar
A glass tube fills with two layers of liquid whose leading edges ripple like a wave. Each edge is a strip masked into a sine shape from three gradients, with the mask sliding to make it move.
progress · playful · bars
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
Product Page Skeleton
A product detail page: hero image and thumbnail strip on the left; title, star rating, price, color swatches and buy row on the right. The shimmer passes the image first, then the details.
skeleton · gradient · icon
Social Media Post Skeleton
A feed post card: avatar, name and time, two lines of text, a media block and an action bar. The media shows drifting blurred color blobs, like a BlurHash placeholder, while the text breathes.
skeleton · gradient · pulse
Notification Feed Skeleton
A live notification feed: a new row fades in at the top with an unread dot, the rest slide down a slot, and the oldest fades away. Four rows share one keyframe, offset by a quarter each.
skeleton · icon
Pricing Table Skeleton
Three plan columns with the middle one raised and badged. The columns pulse in turn and a spot of light keeps tracing the featured card's border, drawn with a conic gradient on an @property angle.
skeleton · glow · pulse
Email Inbox Skeleton
A two-pane mail client: message list on the left, reading pane on the right. The selection steps down the list and the pane shimmers again each time it lands, like opening the next email.
skeleton · gradient
Map Location Skeleton
A location card: a placeholder map with roads and a park, a pin that drops in, squashes and sends out a ripple, then address lines and a directions button. The map is all layered gradients.
skeleton · icon · physics
Folding Cube Loader
Four tiles of a diamond fold into place one after another, hold, then fold away in the same order. The SpinKit classic, built from rotateX and rotateY with per-tile perspective.
shapes · 3d
Honeycomb Hexagon Loader
Seven hexagons pop into a honeycomb one cell at a time around the ring, then shrink away in the same order. Cells are clip-path hexagons with a back-out ease on the pop.
shapes · playful
Triangle Path Loader
A triangle outline draws itself around from one corner, then erases from the start while the shape turns a third of a turn. SVG stroke-dashoffset with pathLength keeps the dash math simple.
shapes · minimal
Polygon Morph Loader
One shape turns from triangle to square to pentagon to hexagon and back, rotating a quarter turn each time. Every clip-path polygon has six points so the browser can tween between them.
shapes · minimal
Sliding Puzzle Loader
Three tiles shuffle around a two by two board, each sliding into the empty slot in turn like a sliding puzzle. One keyframe; negative delays put each tile at its own point in the loop.
shapes · playful
3D Pyramid Loader
A four-sided pyramid turning slowly in 3D, each face a clip-path triangle tilted on its base edge. Opaque faces in stepped shades of the accent, so it reads as solid without any lighting math.
3d · shapes
Stacked Layers Loader
Three isometric plates stacked like a layers icon lift in a wave from the bottom up, the top one highest, so the stack fans open and settles. Plate edges are a drop-shadow on a clip-path diamond.
3d · shapes
Wandering Cubes Loader
Two squares chase each other around the corners of a box, shrinking on each side and turning a quarter per leg. A SpinKit favorite, redone with one transform list so every leg interpolates cleanly.
shapes · minimal
Rubik's Cube Loader
A 3D puzzle cube whose top, middle and bottom layers twist a quarter turn in sequence. Each layer is a preserve-3d slab of five faces; the tile grid is a repeating gradient, not extra elements.
3d · shapes · playful
Falling Blocks Loader
Three block pieces fall into a small well, one snapping a quarter turn and one shifting a column on the way, lock into a square with a thud, then flash and clear like a finished line.
shapes · retro · playful
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
Checkerboard Flip Loader
A four by four checkerboard whose tiles flip over in a diagonal wave, swapping solid and pale squares, then flip back. Two-sided tiles use backface-visibility on a pair of pseudo-elements.
3d · shapes
Isometric Grid Wave Loader
Sixteen blocks on an isometric floor rise and sink in a wave that rolls from the back corner to the front. Each block is one tile plus two pseudo-element sides inside a preserve-3d grid.
3d · shapes
Three Triangles Loader
Three triangles form one larger triangle, and each spins a third of a turn in place, ducking small mid-spin so it clears its neighbors. The turn is invisible at rest, so only the motion shows.
shapes · playful
Star Morph Loader
A five-point star turns while its inner corners swell out into a pentagon and pull back into a star. Both shapes share one ten-point clip-path polygon, so the tween between them is smooth.
shapes · playful
Tumbling Cube Loader
An isometric cube hops, stretching on take-off and squashing on landing, and tumbles a third of a turn in the air so its three shaded faces trade places. One hexagon clip-path with a conic-gradient.
3d · shapes · physics
Rolling Square Loader
A square tips over its corner and rolls along a short floor, two rolls out and two rolls back. The pivot is transform-origin on a corner; a stepped parent resets the roll so the loop never slides.
shapes · playful · physics
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
Tangram Loader
The seven tangram pieces burst out of their square, each turning on its own center, then click back together. Every piece is a full-size box clipped to its polygon, so one keyframe drives them all.
shapes · playful
Origami Fold Loader
A paper diamond folds in half across one diagonal, opens, then folds across the other, showing its paler back while folded. Each quarter is two-sided through backface-visibility.
3d · shapes
Wireframe Cube Loader
A wireframe cube tumbles on two axes while a smaller tinted cube inside turns the opposite way, like a tesseract sketch. Edges are borders on transparent faces in one preserve-3d scene.
3d · shapes
Kaleidoscope Loader
Six mirrored wedges share one drifting pattern of shapes, so it folds into a turning mandala like a real kaleidoscope. Each wedge is a clip-path slice; every other one is flipped with scaleX(-1).
shapes · playful
Filling Square Loader
A square outline flips over empty, fills from the bottom, flips again while full, then drains. The classic hourglass square, redone with scaleY and a swapped transform-origin instead of height.
shapes · minimal
Unfolding Cube Loader
A cube on a turning floor opens flat into its cross-shaped net, then folds back up with the lid closing last. Each side hinges on its own edge through transform-origin inside one preserve-3d floor.
3d · shapes
Assembling Cube Loader
The three visible faces of an isometric cube fly in from three sides, lock together with a small pop, then drift apart and fade. Three clip-path rhombuses share one box, so no 3D context is needed.
shapes · 3d
Card Stack Loader
Three cards stacked in perspective: the front card swipes away, the others step forward, and it slides back in at the rear. translateZ supplies the depth, so cards shrink with distance for free.
3d · shapes
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
Split Square Loader
A square cut on its diagonal slides apart along the cut, turns a quarter while open, then snaps shut. Four quarter turns make one loop; the halves are two clip-path triangles on one box.
shapes · minimal
Pixel Hourglass Loader
A pixel-art hourglass: sand pixels leave the top chamber one tick at a time and pile up in the bottom, then the glass flips. Each grain toggles with a stepped keyframe offset by its own delay.
shapes · retro
Bouncing Shapes Loader
A triangle, a circle and a square hop in turn, stretching on take-off and squashing on landing. The triangle and square spin in the air by exactly their symmetry, so each lands looking unmoved.
shapes · playful · physics
Atom Loader
A glowing nucleus with three tilted elliptical orbits and an electron racing around each. Two nested translate animations with sine easing trace every ellipse.
orbit · physics
Saturn Loader
A shaded planet inside a tilted, spinning ring that passes behind it at the top and in front at the bottom. Real 3D: the ring and planet share one preserve-3d scene.
orbit · 3d · playful
Moon Phases Loader
The moon waxes from new to full and wanes back again. A half disc and a scaling terminator ellipse do the work, eased so the phases pace like the real thing.
orbit · minimal
Solar Eclipse Loader
An unseen moon slides across the sun, trimming it to a crescent, then totality lights up a glowing corona before the sun returns. The moon is a moving mask, so any background shows through.
orbit · glow · minimal
Domino Loader
Five dominoes topple in a chain, each tipping onto the next with an accelerating fall and a tiny bounce, then stand back up in the same order. The last one lands flat.
physics · playful
Water Drop Loader
A drop falls, accelerating, and hits the surface: two ripples spread in perspective and a tiny droplet jumps back up. Everything runs on one shared 1.8s clock.
physics · pulse
Ferris Wheel Loader
A spoked wheel turns on its A-frame while six cabins stay level, each counter-rotating by exactly the wheel's angle. Slow and friendly for longer waits.
orbit · playful · tailwind
Magnet Loader
A horseshoe magnet pulls a stream of dots onto its poles, each one speeding up as it gets closer and vanishing on contact, while dashed field lines pulse between the poles.
physics · playful · icon
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
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
Metronome Loader
A pyramid metronome whose weighted arm swings from side to side at a steady tempo. The arm pivots at its base with sine easing, like a real pendulum.
physics · playful
Seesaw Loader
A plank tips over its fulcrum and a ball rolls down it, speeding up as it goes; when it lands the plank flips with a little overshoot and the ball rolls back.
physics · playful
Spring Loader
A weight hangs from a coil spring, gets pulled down, then bounces up and settles with damped oscillation. The SVG coil scales with a non-scaling stroke.
physics · playful
Comet Orbit Loader
A comet loops a long ellipse around a small sun, crawling at the far end and whipping past the near one as Kepler's law says. The trailing dots stretch into a tail at speed.
orbit · 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
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
Yo-Yo Loader
A yo-yo drops on its string, sleeps for a beat at the bottom with a small recoil, then climbs back up, spinning the whole time. The string scales from the top to match.
physics · playful
Spinning Top Loader
A toy top spins on its point, stripes racing across its body, while it wobbles and drifts over a soft shadow. Only transform and background-position are animated.
physics · playful
Pulley Loader
Two weights hang over a pulley and trade places, one sinking as the other rises, while the wheel turns by exactly the length of rope that passes over it. Ropes scale from the top.
physics · playful
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
Gravity Well Loader
A ball spirals down a funnel drawn in perspective, speeding up as the orbit tightens, then drops through the hole. The funnel's depth follows 1/r, like a gravity well diagram.
orbit · physics · 3d
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
Binary Star Loader
A heavy star wobbles while a small companion circles it on a tilted orbit, crossing in front and then slipping behind. Depth comes from synced scale and z-index keyframes.
orbit · physics · 3d
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
Screensaver Bounce Loader
A little badge drifts around a screen frame and bounces off every edge, changing hue each time it hits a side wall. Two linear alternate animations with different periods.
physics · retro · colorful
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
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
Double Pendulum Loader
Two linked arms swing in a restless, chaotic-looking dance while the end bob leaves a short trail. Each arm is a sum of whole harmonics, so the 4.8s loop still closes.
physics · minimal
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
Morphing Blob Loader
A gradient blob that slowly reshapes itself by animating eight border-radius values while it turns, with a blurred copy underneath as a soft glow. Calm enough for long waits.
gradient · glow · shapes
Lava Lamp Loader
Wax blobs rise and sink inside a glass capsule, merging and splitting as they pass. The goo is an inline SVG filter in objectBoundingBox units, so it scales with the loader.
glow · physics · playful
Rising Bubbles Loader
Bubbles of different sizes wobble up through a tinted circle and pop at the surface. Suits brewing, processing and liquid themes. The wobble runs on the separate translate property.
physics · playful · glow
Animated Gradient Border Loader
A rounded square whose border carries a traveling multi-hue gradient. An oversized conic layer rotates behind a mask that keeps only the edge, so the middle stays clear for an icon.
gradient · glow · colorful · shapes · tailwind
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
Plasma Ball Loader
A glass globe with glowing tendrils that wander from a bright core out to the glass, flickering as they go, like a plasma lamp. Each tendril has its own speed so the pattern keeps changing.
glow · playful · colorful
Bokeh Lights Loader
Soft out-of-focus discs in neighboring hues drift and brighten one after another, like city lights through a fast lens. Each disc has the brighter rim real bokeh has. Good for ambient waits.
glow · colorful · 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
Spotlight Sweep Loader
A lamp swings its cone of light from side to side while the lit spot slides along the floor below. Fits search, lookup and discovery states. The beam is a soft conic wedge, not a blurred shape.
glow · playful · gradient
Electric Arc Loader
A jagged arc crackles between two charged nodes, then cuts out while the nodes build charge again. Three bolt shapes swap in stepped keyframes, which is what makes it jitter like real current.
glow · playful
Light Trail Loader
A point of light traces a trefoil knot and leaves a fading streak behind it, like a long-exposure photo. Three dashes of different lengths share one head through offset animation delays.
glow · minimal · shapes
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
Neon Cube Loader
An isometric wireframe cube built from neon tube, with two bright pulses racing along its edges and through the inner corner. One SVG path drawn three times: dim tube, glow and hot core.
glow · 3d · retro
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
Firework Burst Loader
A flash at the center, twelve sparks streak out in alternating hues and fizzle, and a smaller shell follows half a beat later. Fast out, slow fade. Fits celebratory waits like publishing.
glow · colorful · playful
Synthwave Sun Loader
The striped 80s sunset: a gradient sun whose lower half is cut into bands that keep sliding down. Two mask layers do it, a solid top half plus repeating stripes with an animated position.
gradient · glow · retro · colorful
Dripping Goo Loader
Drops swell under a bar of goo, stretch a neck, let go, and fall into a pool that swallows them. The necks are real: an inline SVG goo filter joins nearby shapes, so drops and pools merge.
physics · playful · glow
Soap Bubble Loader
A soap bubble that wobbles and bobs in place while a thin-film shimmer slides around its edge. The wobble and bob run on the separate scale and translate properties so they never fight.
gradient · physics · colorful
Smoke Loader
Soft puffs of smoke curl up from a glowing ember, swelling and fading as they drift side to side, like incense. Each puff is a blurred radial gradient on a staggered delay, so the plume never breaks.
glow · minimal
Ink Drop Loader
A drop of ink falls into a glass of water, sends a small ripple across the surface, and blooms into soft swirling clouds that fade before the next drop lands. Blurred blobs do the bloom.
physics · glow · playful
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
3D Sphere Loader
A glossy ball floats above its shadow while the light circles around it, so the highlight sweeps the surface and the shadow swings the opposite way. Two rotating gradient layers, no 3D transforms.
3d · gradient · glow
Spirit Level Loader
A glass vial of tinted liquid rocks gently while its air bubble slides to the high end, stretching as it moves and settling at the marks. The bubble lags the tilt a beat, which sells the liquid.
physics · playful · glow
Diamond Shine Loader
A faceted gem bobs in place while a band of light sweeps across its cut and a glint flashes at the corner. Facets are accent tints and shades; an SVG clipPath keeps the band on the stone.
gradient · glow · shapes
Hologram Loader
A wireframe globe spins in a cone of light above a projector, with scanlines rolling through it and the odd glitch. Meridians are ellipses squeezed with scaleX, so there is no 3D transform at all.
glow · 3d · retro
CRT Screen Loader
An old tube screen powers on from a dot to a line to a glowing picture with rolling scanlines, then collapses back to a line and a dot. The classic CRT switch-off, looped, in a single scaled element.
glow · retro
AI Sparkle Loader
The four-point AI sparkle: a large star breathes and turns a quarter while two small ones twinkle in and out beside it. Inline SVG, so the points stay crisp at any size.
ai · icon · pulse
AI Gradient Orb Loader
A soft orb of blurred color blobs drifting around each other while the whole sphere breathes, like a voice assistant listening. Two blobs are hue-rotated from your accent.
ai · gradient · glow · pulse
Streaming Response Loader
Word-shaped tokens stream in from blur, arriving in bursts like a model writing, and the newest ones flash brighter before settling. Driven by one registered @property.
ai · skeleton · text
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
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
Voice Assistant Loader
A filled circle with five white bars moving like a live voice waveform, while a faint ripple rolls outward. Fits voice input, dictation and any 'listening' state.
ai · bars · pulse · icon
AI Image Generation Loader
A tile of placeholder pixels where a glowing scan line sweeps down and leaves a sharp little landscape behind it, like an image model painting. The picture is pure gradients.
ai · skeleton · gradient
AI Generating Badge Loader
A 'Generating' pill whose border carries two bright arcs chasing around it while a sparkle turns inside. The arcs are a conic gradient spun by a registered @property angle, masked to the border.
ai · gradient · text
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
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
Progress Button Loader
A button that fills with color from left to right as a download runs, with the label flipping to white exactly where the fill has passed. Two stacked labels and one clip-path.
button · progress
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
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
Sending Message Button Animation
A round send button whose paper plane pulls back, launches off the top corner and glides back in from below, with a ring rolling out on each launch. Loops while a message is in flight.
button · icon · playful
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
Scramble Text Loader
Each letter of LOADING flickers through random symbols before it locks in, left to right, then scrambles again. Pure CSS: the symbols are animated content on a pseudo-element.
text · retro · playful
Split Flap Text Loader
LOADING spelled on split-flap tiles, like an airport departure board: each tile's top flap falls and the bottom flap snaps into place, rippling left to right. Letters come from a data attribute.
text · retro · 3d
Dropping Letters Loading Text
The letters of Loading fall into place one by one, squash on landing, hold, then drop away through the baseline. Negative delays keep the stagger clean from the first frame.
text · playful · physics
Text Fill Loading Animation
Outlined LOADING letters fill with solid color from the left, then the fill slides out to the right. A text stroke plus a moving background clipped to the glyphs, no extra markup.
text · progress · minimal
Rotating Status Text Loader
A status pill with a dotted spinner and a word that rolls up through Fetching, Parsing and Rendering. Pure CSS: a word column slides inside a one-line window.
text · ai · inline
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
Text to Speech Loader
A speaker icon with pulsing sound waves and a sentence whose highlight hops from word to word as it is read aloud. Every word shares one keyframe with a staggered delay.
ai · text · inline
AI Summarizing Loader
A small document with a highlighter sweeping across its lines one at a time, as if the model is reading it, and a sparkle badge in the corner. Two synced animations, one moving down in steps.
ai · skeleton · icon
AI Thinking Loader
A small rounded square hops beside the word Thinking, squashing on landing, stretching on takeoff and turning a half circle in the air while its shadow shrinks and grows.
ai · text · physics · playful
Magic Wand Loader
A wand with a star on its tip waves back and forth while small sparkles pop into the air it just left. A friendly 'working some magic' state for AI rewrite and enhance buttons.
ai · icon · playful
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
Uploading Toast Loader
A pill toast with an arrow that keeps launching out of its circle, an 'Uploading 3 files' label and a mini progress bar underneath. Drop it in a corner while files go up.
progress · inline · icon
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
Coffee Cup Loader
A cup on a saucer with three wisps of steam that curl up and fade in turn. The cup is two pseudo-elements; the steam is SVG paths animated with stroke-dashoffset.
playful · icon
Cloud Upload Loader
An arrow rises into a cloud outline, pauses, then shoots up and fades, over and over. Made for file uploads and sync; the cloud is one SVG path left open where the arrow passes.
playful · icon · minimal
Download Arrow Loader
An arrow drops into an open tray and the tray squashes as it lands, like a file arriving. The arrow falls inside an overflow-hidden lane, so it vanishes cleanly into the tray.
playful · icon · physics
Rocket Loader
A little rocket climbs on the diagonal with a flickering exhaust flame while stars streak past. Drawn as one small SVG; the flame flicker is a scaleY from the nozzle.
playful · icon
Paper Plane Loader
A folded paper plane glides on a gentle swell, trailing a dashed flight path that keeps streaming behind it. Suits 'sending' states for messages, forms and invites.
playful · icon
Pizza Loader
A pepperoni pizza whose eight slices get taken one by one, then come back in the same order. Each slice is a clip-path wedge with its own delay, like a pie timer you can eat.
playful · icon · shapes
Frying Pan Loader
A frying pan dips, flicks and tosses a pancake that spins through the air and lands back with a squash. Anticipation, overshoot and a catch make it feel like a real flip.
playful · icon · physics
Ghost Loader
A friendly ghost bobs in the air above its shadow, eyes glancing side to side while its wavy hem flutters. The hem is a repeating radial-gradient whose background-position slides.
playful · icon
Flipping Book Loader
An open book whose pages turn from right to left, one after another in a steady rhythm. Pages rotate in 3D around the spine with rotateY, so it needs no images or JavaScript.
playful · icon · 3d
Envelope Loader
A letter slides into an open envelope, the flap folds shut and the envelope hops as it is sent. Built from clip-path triangles; the flap flips with scaleY and swaps its z-index.
playful · icon
Magnifying Glass Search Loader
A magnifying glass circles over a faint page of text lines, the classic 'searching' motion. The glass stays upright because the lens counter-rotates inside a rotating track.
playful · icon · orbit
Traffic Light Loader
A traffic light that runs the real sequence: top, then bottom, then middle, like red, green, amber. Three lamps share one keyframe and differ only by delay, so retinting is one variable.
playful · icon · minimal
Candle Flame Loader
A candle whose teardrop flame flickers and leans while a soft glow breathes around it. Calm enough for long waits; the flicker is scale and skew around the base of the wick.
playful · icon · glow
Burger Stacking Loader
Bun, patty, lettuce and a sesame top bun drop in one by one and squash as they land, then the finished burger fades and it starts again. Fun for food, ordering and delivery apps.
playful · icon · physics
Swimming Fish Loader
A little fish swims in place with a wagging tail and a gentle bob while bubbles rise from its mouth. Pure CSS: an oval body, a clip-path tail and three ringed bubbles.
playful · icon
Footsteps Loader
Shoe prints stamp down left, right, left across the card and fade behind the walker. Good for onboarding, step-by-step flows and anything 'on its way'.
playful · icon
Car Driving Loader
A small car bounces along with spinning wheels while the road markings rush past underneath. Suits delivery tracking, ride apps and 'on the way' screens.
playful · icon
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
Sun and Cloud Loader
The sun peeks out from behind a drifting cloud with slowly turning rays, the 'partly cloudy' icon brought to life. Rays are a masked repeating-conic-gradient, so the ring stays crisp.
playful · icon
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
Music Notes Loader
Two eighth notes and a beamed pair hop in a wave and tilt as they land, like a tune bouncing along. Good for audio, playlist and podcast screens; each note is one span plus pseudo-elements.
playful · icon
Light Bulb Loader
A light bulb flickers on, glows with a burst of rays, then switches off again. Reads as 'thinking of an idea', so it suits AI, brainstorming and generate buttons. One inline SVG.
playful · icon · glow
Pencil Drawing Loader
A pencil writes a wavy line across the card, lifts, and goes back to start while the line fades. The tip tracks the SVG stroke exactly, because both run on the same linear timeline.
playful · icon
Gift Box Loader
A wrapped present crouches, then its lid pops up with a wobble and a few sparkles escape before it slams shut. Fun for rewards, promo codes and 'preparing your surprise' states.
playful · icon · physics
Shopping Cart Loader
Items drop into a shopping cart one after another, bounce as they land and make the cart dip. A natural fit for checkout, add-to-cart and order processing waits.
playful · icon · physics
Rolling Dice Loader
Two dice take turns hopping, tumbling a full turn in the air and landing on a new face with a squash. Faces are radial-gradient pips that swap mid-spin, when nobody can see.
playful · icon · physics
Basketball Hoop Loader
A spinning basketball arcs into the hoop, swishes the net, bounces once on the floor and fades before the next shot. The arc is two nested elements, one moving across and one up and down.
playful · icon · physics
Watering Can Loader
A watering can tips forward, pours a stream of drops onto a sprout that perks up, then rights itself. Good for growth, onboarding and 'setting things up' moments.
playful · icon
Cookie Bite Loader
A chocolate chip cookie loses three bites, crumbs dropping each time, then a fresh one pops back in. Bites are mask circles whose radius grows through @property variables.
playful · icon
Snail Loader
A snail inches along, body stretching and antennae waving, leaving a faint slime trail. A self-aware loader for slow jobs; the whole snail is one SVG with a spiral shell path.
playful · icon
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.