16 Pure CSS4 Light JSPublished 13 new designs · Updated on
20 copy-paste CSS loading animations where the loader IS product storytelling — e-commerce checkout, video buffering, AI chat thinking dots, fintech transactions, package delivery, healthcare, music vinyl, boarding passes, real estate. Distinct from generic loader mechanics, spinner shapes, and content placeholders — the animation carries the product context, not just the wait signal. Scoped under .la-NN, prefers-reduced-motion guarded, framework-agnostic.
Want to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 20 loaders. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
The waiting state that costs the most money on the internet. Instead of a bare spinner, this one narrates the three things actually happening after a shopper hits Pay — processing payment → confirming order → generating receipt — while product tiles drop into an animated cart and a determinate bar fills. The percentage readout is pure CSS: an animated @property integer piped into counter(), so there is no setInterval repainting text every frame.
A player-grade buffering overlay: a segmented ring where the buffered arc sweeps ahead of twelve chunk ticks, a glassy scrim over the video frame, a live timecode, and a quality chip that only surfaces once the buffer is healthy — the same information hierarchy Netflix and YouTube use to tell you "we're still fetching, but we're fine". Built with one conic-gradient, a mask ring and zero images.
Food delivery apps buy patience with narrative: you are not waiting, the kitchen is cooking. A pan tosses on a staggered rhythm, three ingredients arc through the air, steam curls drift and dissipate, and a heat bloom flickers underneath — all drawn with gradients and radii, no sprite sheet, no Lottie. The order line names a real restaurant, courier and item count the way DoorDash or Uber Eats would.
The loader every file manager needs: a document lifts off a tray, rides a column of sync dots into a cloud, and the cloud's outline closes with a drawn checkmark before the cycle restarts. The filename, byte count and transfer rate are real Dropbox/Drive-grade metadata, and the ring around the cloud is a genuine determinate arc you can bind to an XMLHttpRequest.upload progress event.
The most-copied loader of the AI era, done properly. Three dots bounce inside a real assistant bubble using a linear() easing curve — a genuine spring, not a lopsided ease-in-out — while the status line cycles through the phases an agent actually goes through (reading files, searching, drafting). A gradient shimmer sweeps the label text, and the done state swaps the dots for a streamed-answer skeleton.
Trust is the product in fintech, so the loader has to look like verification, not decoration. A shield fills with a conic sweep, a scan line passes over it, the padlock's checkmark strokes itself in, and the copy states the amount and the encryption standard. The percentage under it is a pure-CSS counter — no timer repainting text while a payment is in flight.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Package tracking is a waiting state people refresh on purpose, so it deserves the best loader in the set. A van drives a curved dotted route on a stylised street grid using offset-path — real CSS motion-path, not a keyframed translate approximation — the route dashes flow toward the destination pin, the pin pulses, and a live ETA ticks down next to the courier's name.
Health-tech waiting states carry anxiety, so this one is calm and factual: a calendar tile scans its days, settles on the booked slot, and strokes a confirmation tick while an ECG trace runs a steady 60 bpm underneath. The copy names the clinician, date and clinic — everything a patient needs to know the right appointment is being held.
A turntable loader with real record physics: grooves cut as a repeating-radial-gradient, a specular sheen that sweeps as the disc turns, and a tonearm that lowers onto the platter at the top of every cycle. An equalizer strip below moves with the beat, and the track line reads like a real now-playing row.
Airline check-in has a natural loading beat — the moment the pass is issued. This loader builds a real boarding pass: a perforated stub punched with mask, a barcode that prints bar-by-bar with steps(), a plane crossing the SFO → LHR route line, and a gate that stays · · until assignment lands. All the pieces of a ticket UI you can reuse beyond the loader.
The friendliest loader in the collection and the easiest to reuse: an espresso stream pours from the group head, the cup fills with a real crema line, steam curls lift and dissipate, and a serif label counts the brew. Everything is CSS — one cup element, one liquid mask and three blurred pills — so it drops into any café, kitchen or lifestyle app.
Generating a PDF, exporting a contract, printing a label — anything that produces a document deserves this loader instead of a spinner. A sheet slides out of a printer with its text lines revealing top-to-bottom under a mask, the status LED blinks between passes, and the page counter advances 1 → 5 in pure CSS with a stepped counter().
A doppler-style radar scope: a conic sweep rotates over concentric range rings, precipitation cells fade up as the beam passes them, and range/coordinate readouts frame it like a real weather console. It is the most "instrument-panel" loader in the set and the best fit for any geospatial or scanning wait state.
Smart-lock and property-access flows have a perfect metaphor built in. A padlock's shackle lifts, the front door swings open on a real 3D hinge, and warm interior light spills out as the address is verified — the exact beat a viewing-access or digital-key app needs while it checks a booking.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Skeleton screens beat spinners for content-heavy lists because they preserve layout and reduce perceived wait. This one is a complete property-listing card — media, price, address, spec chips, agent row — that shimmers while loading and crossfades into the real listing on .is-ready, with aria-busy handled correctly so screen readers do not read placeholder boxes.
A four-stage progress path for any long-running, multi-phase job — mortgage underwriting, KYC, onboarding, a build pipeline. The connector fills, the active node pulses, completed nodes stroke a tick, and every visual state derives from onedata-step attribute on the root, which is the cleanest state pattern in CSS.
Map and analytics products need a loader that says "we are computing over an area". A price heat-map grid pulses in diagonal waves as a compass needle hunts for north — the wave is pure nth-child delay maths, and the colour ramp is built in oklch() so intensity steps look evenly spaced instead of muddy in the middle.
For anything that loads in layers — floor plans, building data, a multi-tenant dataset — this loader lights a tower floor by floor from the ground up, with a survey line rising through it and a floor counter climbing 1 → 6 in pure CSS. It looks like a city at dusk and reads instantly as "still assembling".
A media-grade reveal: a 36-tile mosaic dissolves in a pseudo-random order to expose the artwork underneath, then re-forms and repeats. The scatter comes from a CSS mod() hash on each tile's index — no JavaScript randomness, no 36 hand-written delays — with a linear fallback for engines that lack mod().
The universal "this will take a moment" symbol, executed properly: sand actually drains from the top bulb into the bottom one through a falling stream, and the whole glass flips at the end of every cycle so the loop never resets visibly. A countdown readout ticks down in pure CSS beside it.
↗
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
How do I create a CSS loading animation for a specific product context like checkout or file upload?
Match the loader's visual metaphor to the user's mental model of what's happening. A checkout loader can show a filling cart with dots for processing → confirming → generating receipt. A file upload can show a file rising into a cloud icon with progress dots. Use @keyframes for the motion, animation-iteration-count: infinite to loop, and semantic aria-live regions so screen readers announce state changes. The 20 demos in this collection each map to a real product surface — copy the @keyframes and markup from any demo's code panel.
Can a loading spinner be made without JavaScript?
Yes for most patterns. 16 of the 20 demos here are pure CSS — the animation loop runs on @keyframes without any JS. The 4 that use light JS (under 30 lines each) do it for state transitions (loading → ready toggle), not for the animation itself. You add the loader to the DOM while data is loading and remove or hide it when ready; the animation loop never needs JS to run.
What's the difference between a loading spinner and a skeleton loader?
A spinner is an abstract indicator — a rotating or pulsing shape that signals 'something is happening' without hinting at the content. A skeleton loader shows grey placeholder shapes matching the layout of the real content (cards, lines of text, an avatar) so the page feels structured before data arrives. This collection focuses on the third category: product-context loaders where the animation itself tells the user what's loading (a cart filling for checkout, a truck moving for delivery, dots thinking for AI chat). For pure spinners see css-spinner-designs; for skeletons see css-skeleton-loaders.
How do I make a CSS loading animation smooth and not janky?
Animate only transform and opacity — they're GPU-accelerated and don't trigger layout. Avoid animating width, height, top, or left. Use animation-timing-function (ease-in-out or a custom cubic-bezier) so the motion feels natural, and keep the loop duration in the 2-4 second range — long enough to see the story, short enough not to feel slow. Every demo here follows this approach.
How do I make a loading animation accessible?
Three rules. First, honour prefers-reduced-motion — every demo here includes a @media (prefers-reduced-motion: reduce) block that shows a static state instead of the animation loop for motion-sensitive users. Second, wrap the loading region in role='status' with aria-live='polite' and an aria-label describing what's loading ('Loading your order', 'Buffering video'). Third, if the loader shows progress percentage, add role='progressbar' with aria-valuenow, aria-valuemin, and aria-valuemax so screen readers announce the completion state.
How do I trigger a completion animation when loading finishes?
Use a data attribute pattern: set data-state='loading' on the loader root while waiting, then swap to data-state='ready' when the async work completes. Style each state with CSS: the loading state runs the animation loop, the ready state stops the animation and shows a success indicator (checkmark, filled bar, unlocked icon). Some demos in this collection include an .is-ready variant showing the completion state — see the AI Chat, File Upload, and Fintech Transaction demos for the pattern.
Why use product-context loaders instead of generic spinners?
Product-context loaders reduce perceived wait time. Research from Nielsen Norman Group and others shows that when users see a loader that reflects what's actually happening ('your order is being confirmed' with a filling cart) rather than an abstract spinner, they perceive the wait as shorter and are less likely to abandon the flow. For high-stakes product moments (checkout, upload, payment, appointment booking), a context-specific loader improves conversion and reduces support tickets from confused users.
How is this different from generic loader libraries or CSS spinner collections?
Generic loader libraries (loading.io, SpinKit, CSS-Loader) ship abstract patterns — dots, rings, cubes, dna helixes. They're great for signaling 'something is happening' but don't tell the user WHAT is happening. This collection focuses on product-specific loaders where the animation is contextual: a cart filling for e-commerce checkout, a truck moving for delivery tracking, a vinyl spinning for a music app, an AI chat dot pulse for an LLM response. The 20 demos here ship raw so you can drop them into React, Vue, Svelte, Astro, or plain HTML — copy the CSS, wrap the state transitions in your framework's event handlers, done.
