CSS Loading Spinner Generator

How to use

1. 1Pick a spinner style. Each style has a tooltip and sensible defaults; clicking a style resets the size and duration to a flattering preset for that family.
2. 2Adjust the size, animation duration, and (where the style supports it) the stroke or bar width using the sliders. Type into the number boxes for exact values.
3. 3Pick a primary color with the color picker or paste a hex value. The Ring style also exposes a track color for the underlying circle.
4. 4Type a CSS class name (loader-ring by default). The output CSS and the HTML markup will both use this class, so you can drop the snippet into your project unchanged.
5. 5Switch the preview background between Dark, Light, and Checker to confirm the loader looks right on every page kind. The preview always uses the exact CSS the copy buttons return.
6. 6Pick the CSS tab for the @keyframes plus rule, the HTML tab for the markup, or HTML + CSS for a single paste-ready block. Click Copy to put it on your clipboard.

About this tool

CSS Loading Spinner Generator builds a pure-CSS loading indicator and renders it live using the exact CSS the tool will copy, so what you see is what you paste. Eight distinct loader families are included: Ring (a single rotating arc cut from a circle using the classic border-top trick), Dual ring (two arcs counter-rotating to form a self-correcting circle), Dots (three discs that scale up and down in sequence for a calm, on-brand idle indicator), Pulse (a single disc that pulses outward while fading like a heartbeat), Bars (four vertical bars that scale on the y axis like an audio EQ meter), Ellipsis (four discs that mimic the classic typing-dots ellipsis), Ripple (two concentric circles that expand and fade like a radar ping), and Square spin (a single rounded square that rotates a full turn on perspective). Every style is a real CSS pattern: no images, no SVG sprites, no external icon fonts, and no JavaScript animation loop. The generator exposes the controls people actually search for: a size slider from 16 to 160 pixels, an animation duration slider from 200 to 5000 milliseconds (snappy spinners under 600 ms feel quick for form submissions, calmer spinners around 1200 ms suit longer fetches), a stroke or bar width slider where the style supports it, a primary color picker with a hex input for matching a brand color, an optional track color for the ring style, and a CSS class name field so the copy output uses the selector you actually want in your project. Output is shown in three tabs: CSS only (the @keyframes block plus the class rule), HTML only (the markup with role="status" and an aria-label for screen-reader accessibility), and HTML + CSS (a single block ready to paste into a sandbox). The preview surface switches between dark, light, and a transparent-checker background so you can confirm the loader reads well on every page kind you might ship it to. Settings, colors, and class names stay in your browser; nothing you tune is uploaded. Useful for app loading states, route transitions, file upload progress, search waits, lazy-loaded image placeholders, dashboard refreshes, infinite scroll prompts, and any place a button or panel needs a polished pure-CSS replacement for the generic browser spinner.

Free to use. Works in your browser. No signup, no login.