CSS Loader Generator

Pick a loader style, adjust size, color and animation speed, and this tool generates the full CSS — including the @keyframes rule — plus the matching HTML markup, so you can copy a working loading animation without writing any animation code by hand.

What Is This Tool?

A CSS loader is a small animated element — a spinning ring, bouncing dots, a pulsing circle, or a moving progress bar — used to show that content is loading, with no JavaScript animation loop and no image or GIF required. It's built from a couple of CSS rules plus a @keyframes block that defines how the element moves over time.

This tool generates four common loader patterns with real, working CSS: a rotating border-based spinner, three dots that bounce in sequence, a circle that pulses in and out, and a bar with a sliding fill. Adjust size, color and animation duration on the live preview, then copy the generated CSS and the minimal HTML element it applies to.

Source: CSS Animations Level 1, W3C — the specification defining @keyframes and the animation properties these loaders are built from.

Why Use It?

Live preview animates in real time as you change style, size, color or speed — see exactly what you'll ship.
Generates the complete CSS including the @keyframes block, not just a snippet you have to finish yourself.
Also outputs the exact HTML markup the CSS expects, so there's no guessing about class names or element structure.
Four distinct animation patterns (spinner, dots, pulse, bar) cover the most common loading-state use cases.
Pure CSS animation — no JavaScript, no image assets, smaller and smoother than an animated GIF.
Runs entirely in your browser, free, no signup.

How to Use

Choose a loader style: spinning ring, bouncing dots, pulsing circle, or progress bar.
Drag the size slider to scale the loader up or down.
Pick a color — this becomes the loader's accent color (the spinning border, the dots, or the bar fill).
Adjust speed to make the animation faster or slower; most UI loaders read best between 0.6s and 1.5s per cycle.
Copy the generated CSS into your stylesheet and paste the HTML snippet wherever you need the loader to appear.

Example

Input

Style: spinning ring · Size: 40px · Color: orange · Speed: 1.0s

Output

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

A classic ring spinner: a circle with a transparent-ish border on three sides and a solid color on the fourth, rotated continuously with a linear, infinite animation.

Why CSS loaders instead of animated GIFs

Animated GIF spinners were the default for years, but a CSS loader is almost always the better choice today: it's a few hundred bytes of text instead of a binary image file, it scales to any size without pixelation since it's drawn with borders and transforms, and its color can be changed instantly with a single CSS variable instead of re-exporting a new image.

The four styles here — spinner, dots, pulse, bar — are also the ones that show up most often in real interfaces, from button loading states to full-page overlays. Each uses only transform and opacity changes in its keyframes, which browsers can animate smoothly on the GPU without janking the rest of the page.

Choosing a style for the situation

Spinning ring: the most neutral, general-purpose choice — works well inside buttons and small inline loading states.
Bouncing dots: reads as lighter and more playful; common for chat 'typing...' indicators and short waits.
Pulsing circle: good for a single-element loading indicator or as an 'active/live' status dot.
Progress bar: implies forward motion and is often expected for page loads or multi-step processes, even without exact percentage.

Using the loader in your project

Paste the generated CSS into your stylesheet once, then reuse the HTML snippet anywhere you need a loading state — inside a button while a form submits, over a card while data fetches, or centered in a full-page overlay. Because the animation is pure CSS, toggling it on and off is as simple as adding or removing the element from the DOM, or hiding it with display: none.

→ Box Shadow Generator · CSS Minifier

Frequently Asked Questions

Do these loaders work without JavaScript?

Yes — every loader here is animated purely with CSS @keyframes and the animation property. JavaScript is only needed if you want to show or hide the loader based on an event, like a form submission or a fetch request finishing.

Why does the generated CSS include a @keyframes block?

CSS animations need two parts: the element's base styles (size, color, shape) and a @keyframes rule describing how those styles change over the animation's duration. Both are required for the animation to run, so this tool always generates the complete pair rather than a base style alone.

Can I use more than one loader style on the same page?

Yes. Each style generates its own uniquely named CSS classes and keyframes (for example css-loader-spinner and css-loader-dots), so you can copy multiple styles into the same stylesheet without them conflicting.

Will the loader animation slow down my page?

No — all four styles animate only transform and opacity, which browsers can handle on the compositor/GPU without triggering layout recalculation. This keeps them smooth even on lower-powered devices, unlike animating properties like width or top directly.

How do I change the loader's color later without regenerating it?

Open the copied CSS and change the color value directly — it appears once (as border-top-color, background, or similar depending on the style) rather than being duplicated throughout the rule, so a single find-and-replace updates it everywhere it's used.