CSS Loader Generator

What is CSS Loader Generator?

The CSS Loader Generator is a free in-browser tool for web designers and front-end developers who need a pure-CSS loading indicator without pulling in a library. Choose from five styles - spinner, ring, dots, bars, and pulse - then control the size in pixels, the main color, the speed of one animation cycle in seconds, the stroke thickness, and the dot or bar count. A live preview animates as you edit, and the matching HTML markup plus a CSS style block with @keyframes updates instantly so you can drop it straight into a page. Use it for buttons, page loaders, skeleton states, and async placeholders, or to learn how CSS animation and @keyframes drive each effect.

How to use CSS Loader Generator

1. Choose a loader style: Spinner, Ring, Dots, Bars, or Pulse.
2. Set the size in pixels and pick a color with the swatch or by typing a value.
3. Set the animation speed in seconds for one full cycle.
4. Open Settings to adjust the stroke thickness (spinner and ring) or the number of dots or bars.
5. Watch the live preview animate, then copy the generated HTML and CSS with the copy button.

Examples

Style: Spinner, size 48px, color #4f86f7, speed 1s, thickness 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Style: Dots, size 48px, color #9333ea, speed 1s, count 3

<div class="dd-loader"><div></div><div></div><div></div></div> with staggered animation-delay so the dots scale in a wave.

Frequently asked questions

Which loader styles are available?

Five: Spinner (a rotating arc), Ring (a thicker rotating ring), Dots (dots that scale in a wave), Bars (bars that stretch up and down), and Pulse (a single pulsing circle). Switch with the style menu and the preview and code update instantly.

What do the size, color, and speed controls do?

Size sets the loader's pixel dimensions, color sets the main color (use the swatch picker or type any CSS color), and speed is the duration of one animation cycle in seconds. Thickness controls the stroke for the spinner and ring, while count controls how many dots or bars appear.

Is the generated CSS pure CSS with no JavaScript?

Yes. The snippet is plain HTML plus a <style> block using CSS animation and @keyframes, so it runs without any JavaScript or external library. Paste it into your page and it works on its own.

Why don't thickness and count change every style?

Thickness only affects the spinner and ring (which draw a border), while count only affects dots and bars (which render multiple elements). The other settings ignore them, so the output stays clean for the style you picked.

Is anything uploaded to a server?

No. The loader and its CSS are built entirely in your browser with local string math - no settings, colors, or code are ever sent to a server, so it works offline and keeps your work private.