20 CSS Loading Animations

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.

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.

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.

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.

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.

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.

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.

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.