CSS Loader Generator

What this CSS loader generator gives you

A CSS loader is the small loading animation that tells visitors a page is still working. Writing one spinner by hand is easy. Getting timing, colors and accessibility right for twelve designs takes longer, so the generator above does it for you.

Pick a loader in the gallery, adjust it and copy the CSS code. It runs in your browser, it’s free, and there’s no account. You get three exports:

• HTML + CSS: a scoped snippet using pure CSS, no JavaScript, or a demo page via “Download as HTML file”.
• Animated SVG: a self-contained file that plays in a browser or an <img> tag.
• GIF: for emails and slides, 25 fps, a seamless loop.

How a CSS spinner works

Most CSS loaders are built the same way. The most common approach is a div with a fixed width and height, a solid border in a light color, a darker border-top-color and border-radius: 50%. A @keyframes spin rule rotates it from rotate(0deg) to rotate(360deg), and animation: spin 1s linear infinite keeps the spinner turning. Dots, bars and ripples use the same idea with several elements, a transform such as scale() or translateY(), and a short delay between them. CSS animations like these run without scripts, which is why they make good loading indicators.

The generator writes this code for you, scoped and accessible. Here is a shortened example of its ring spinner output. The class prefix is random per export, so the code won’t clash with your styles:

<div class="ldr-k3x9qa" role="status" aria-label="Loading results"></div>

.ldr-k3x9qa {
  --ldr-color: #6d28d9;
  --ldr-color-2: #ddd6fe;
  --ldr-speed: 1.2s;
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 6px solid var(--ldr-color-2);
  border-top-color: var(--ldr-color);
  border-radius: 50%;
  animation: ldr-k3x9qa-spin var(--ldr-d) linear infinite;
}
@keyframes ldr-k3x9qa-spin { to { transform: rotate(360deg); } }

The 12 CSS loaders, grouped by job

Each loader animation suits a different wait. Here they are in four groups.

Rings and spinners

1. Ring spinner. The classic CSS spinner: a colored segment spinning over a lighter track. Fits buttons, cards and pages, and everybody knows what it means.
2. Dual ring. Two rings spinning in opposite directions, the inner one in your secondary color. More motion, so give it room, for example as a page preloader.
3. Gradient spinner. A conic gradient ring whose tail fades behind a bright head. Looks polished on landing pages and dark designs.
4. Orbit. A dot circling a thin track while a smaller, fainter dot runs the other way inside. Playful, good for apps with a light tone.

Dots for short waits and chat

1. Bouncing dots. Three dots hopping in turn. Small enough to sit next to a label such as “Saving”.
2. Pulsing dots. The same dots, growing and fading. A calmer effect when the animation stays on screen longer.
3. Typing dots. Three dots in a speech bubble. Users read it as “someone is typing”, so keep it for chat widgets.

Bars for progress and media

1. Equalizer bars. Five bars rising and falling like an audio meter, a natural fit for music or voice features.
2. Progress bar (indeterminate). A highlight sliding across a rounded track. It shows work without promising a percentage, which suits uploads you can’t measure.

Shapes and placeholders

1. Ripple wave. Two rings expanding from the center and fading out, like ripples on water. Reads as “searching” or “connecting”.
2. Square flip. A rounded square tipping over in 3D and switching to the secondary color mid-flip. Eye-catching when you have a moment to fill.
3. Skeleton shimmer. An avatar circle and three text lines with a light sweep moving across. It shows the shape of the content that’s coming, which makes it the odd one out.

How to create a CSS loader in four steps

1. Choose a loader. Click a tile or move through the gallery with the arrow keys.
2. Set color, size and speed. Start with one of six palettes, then adjust primary and secondary color. Bouncing dots, pulsing dots, equalizer bars and ripple wave use only the primary color; the panel tells you. Size runs from 24 to 160 px. Thickness (2 to 16 px) applies to the ring, bar and track loaders and is capped when it gets too heavy for the size.
3. Check the motion. Duration per loop goes from 0.4 to 3.0 seconds. Preview on a light, dark or transparent background, and use pause/play to inspect a frame.
4. Label, copy, add. Enter the screen reader text (default “Loading”), add the HTML where the loader should appear and the CSS to your stylesheet.

To recolor or speed up the animation later, override --ldr-color, --ldr-color-2 or --ldr-speed on the class. Removing the loader when content arrives is up to your page: delete the element or hide it with your own script.

Accessibility: role=”status” and reduced motion

A spinning circle tells a screen reader user nothing. Every HTML export carries role="status" and an aria-label with your text. The MDN reference for the ARIA status role explains that this role is a live region with an implicit aria-live value of polite, so assistive tech announces it without interrupting. Keep the label specific: “Loading results” says more than “Please wait”.

Some users turn on “reduce motion” because animation makes them dizzy. The generated CSS respects prefers-reduced-motion: the loader keeps spinning at a third of the speed, and the skeleton shimmer becomes static placeholder blocks.

Spinner or skeleton? When not to use a loading spinner

A loader can’t make a page faster. It changes how the wait feels, and the wrong one makes a short wait feel longer.

Skeleton screens give visual feedback about where text and images will land, so the page seems to assemble itself. A spinner on an empty page gives no such clue. Full-screen preloaders that hide a whole website until every asset has loaded usually hurt the user experience; most people would rather watch the page fill in.

CSS vs SVG vs GIF: which export to use

All three exports come from the same timing model, so they move alike. They differ in where they work.

• Pure CSS is the best choice on the web. It’s tiny, sharp at any size, recolorable through variables, and the only export with the status role and reduced-motion support built in.
• SVG (SMIL) helps where a CMS or builder accepts images but no custom CSS. All 12 loaders export. The square flip turns flat because SVG has no 3D perspective, the gradient spinner builds its tail from 90 small segments, and the SVG ignores reduced-motion settings.
• GIF suits newsletters, signatures and slides, at 1× or a sharper 2× size. GIFs come with a solid background, not a transparent one, so match it to the spot where the GIF will sit.

For longer animations, the free GIF maker turns videos and images into GIFs, and our guide to adding animation to a website covers embedding in HTML and WordPress.

From Flash preloaders to CSS

From 2004 to 2016 this domain hosted the Amara Flash programs, including preloaders that played while a Flash movie loaded. Browsers dropped Flash, and a loading animation today is a few lines of CSS. This tool is the browser successor to those preloaders, though we are not the original company (see about us).

FAQ

What are CSS loaders?

CSS loaders are animated HTML elements styled with CSS that show content is loading. They usually need no JavaScript.

Is a CSS spinner better than a GIF?

On a website, yes: smaller, sharp at every size, recolorable and reduced-motion aware. A GIF is the fallback for email and slides.

Does the loader respect prefers-reduced-motion?

The CSS version runs three times slower and the skeleton stays still. The SVG export doesn’t adapt.

Can I export a transparent GIF?

No. Use the CSS or SVG version when you need transparency.

Do I need an account?

No. Everything runs in your browser and is free.