CSS Loader & Spinner Generator

Pick a spinner, tune size, color & speed, copy a self-contained snippet.

Pick a spinner, tune size, color & speed, copy a self-contained snippet. Free and 100% private — runs entirely in your browser, nothing is ever uploaded.

About CSS Loader & Spinner Generator

The CSS Loader & Spinner Generator is a free, browser-based tool for building pure-CSS loading animations and copying a ready-to-paste HTML+CSS snippet. Pick from 8 styles (Ring, Dual ring, Dots, Bars, Pulse, Ripple, Spinner, Square flip), tune the size, color and speed, and the live preview updates instantly. Use it whenever you need a lightweight loading indicator that runs on CSS keyframes alone, with no JavaScript or image at runtime. Everything runs in your browser, so nothing is uploaded and no settings leave your device.

How to use CSS Loader & Spinner Generator

  1. Pick a loader style from the 8 chips: Ring, Dual ring, Dots, Bars, Pulse, Ripple, Spinner or Square flip.
  2. Drag the Size slider (16 to 96px) and the Speed slider (0.4 to 2 seconds per full cycle) to set the look and pace.
  3. Set the color with the color picker or type a hex value like #5b8def or #abc into the box next to it.
  4. Watch the Live preview animate at your exact settings on the checkerboard background to confirm the result.
  5. Click Copy snippet to grab the self-contained HTML plus CSS, then paste the markup where you want the spinner and the CSS into your stylesheet.
  6. Use Reset any time to return to the default ring at 48px, #5b8def and 1.1s.

Frequently asked questions

Does the generated loader need JavaScript to run?
No. Every style is built from pure CSS @keyframes, so once you paste the HTML element and the CSS, the animation runs on its own with zero JavaScript at runtime. That keeps it fast and dependency-free.
Will the snippet clash with other CSS on my page?
It is designed not to. The class and @keyframes names are namespaced with an ld- prefix, so the snippet is self-contained and won't collide with your existing styles or with a second loader on the same page.
What color formats can I use?
You can use the native color picker or type a hex value. Both 3-digit (#abc) and 6-digit (#rrggbb) hex formats are accepted. If you type something that isn't valid hex, the tool flags it and falls back to a safe default until you fix it.
Can I change how big or fast the spinner is?
Yes. The Size slider ranges from 16 to 96px and the Speed slider sets one full animation cycle from 0.4 to 2 seconds. The live preview reflects your exact settings as you adjust them.
Is my data or design uploaded anywhere?
No. The entire tool runs locally in your browser. Your style choices, color and slider settings stay on your device (they are remembered locally between visits), and nothing is sent to a server.
How do I add the loader to my website?
Click Copy snippet, paste the HTML element into your page where the spinner should appear, and put the CSS block into your stylesheet or a style tag. No build step, library or image file is required.