Animation & Motion · Free generator

CSS Loader Generator

Free · no sign-up Live preview · copy or download the CSS

Loading states in pure CSS: a spinner, pulsing dots or dancing bars — pick the style, tune size, color and speed, and copy markup + keyframes. No GIFs, no JS, a few hundred bytes.

Settings

Generated CSS — updates live


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 30 minCSS Animations & Keyframes@keyframes — the engine.STEP 2 · 25 minCSS Transformsscale/rotate — the cheap moves.STEP 3 · 25 minCSS Pseudo-classes & Elements:nth-child staggering.


  1. CSS Keyframes GeneratorAnimation & Motion
  2. CSS Cubic Bezier EditorAnimation & Motion
  3. CSS Transition GeneratorAnimation & Motion
  4. CSS Toggle Switch GeneratorUI Components
  5. CSS Hover Effects GeneratorAnimation & Motion


How it works


Each loader is one element (plus <i> children for dots/bars) and one @keyframes rule, animating only transform and opacity — the properties browsers composite for free, so loaders stay smooth exactly when the page is busy. Staggering comes from negative animation-delays: each child starts partway through the same cycle.


Give the loader an aria-label="Loading" or accompanying text, and consider a reduced-motion fallback — a static label beats an animation for users who've asked for less motion.


Run the code — try it yourself
Build the classic ring: a bordered circle with a one-colored top edge, spinning via @keyframes. Skeleton ready.


exercise.html — editable


Frequently asked questions
Why negative animation delays?
A negative delay starts the animation mid-cycle immediately — no initial pause, and siblings phase-shift into a wave.
GIF vs CSS loader?
CSS wins on every axis: bytes, scaling, recolorability with one variable, and it can't stutter while assets load — it IS the loading state.
How do I stop it when content arrives?
Remove/hide the element, or toggle animation-play-state: paused — usually you're replacing it with the loaded content anyway.


Keep going
A loader is a promise rendered in motion — keep it smooth by animating only transform and opacity, the lesson at the heart of CSS Animations & Keyframes.
CSSmatic is a non-profit project, made by developers for developers.