CSS Loader Generator

Build a pure-CSS loading animation. Choose a spinner, dots, bars, pulse or ring, set the size, colour and speed, and watch it animate. You get the HTML and CSS with keyframes.

This CSS loader generator builds a loading animation and hands you the HTML and CSS, keyframes included. Pick a style — spinner, dots, bars, pulse or ring — then set the size, colour and speed, and a live preview animates as you adjust. Every option is pure CSS, so this works as a css spinner generator with no libraries and no JavaScript. Use it as a quick css loader maker to drop loading animation css into any project.

Every style is pure CSS with a keyframe animation, so it runs without any JavaScript. Lower the cycle time to speed the spinner up; raise it to slow the loading animation down.

HTML
<div class="loader"></div>
CSS
.loader {
  width: 48px;
  height: 48px;
  border: 6px solid color-mix(in srgb, #6d28d9 25%, transparent);
  border-top-color: #6d28d9;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

How it works

  1. 1

    Pick a style

    Choose spinner, dots, bars, pulse or ring. Each is a different loading animation css pattern.

  2. 2

    Set size, colour and speed

    Drag the size and speed and choose a colour. The css spinner generator updates the animation live.

  3. 3

    Copy HTML and CSS

    Copy the small HTML and the CSS, keyframes and all, then drop them where you show a loading state.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

Does this CSS loader generator use JavaScript?
No. Every loader is CSS with a keyframe animation, so it starts as soon as the element is on the page. There’s nothing to initialise.
How do I change the loader speed?
Use the speed slider. It sets the animation-duration, so a lower number spins faster and a higher one slows the loading animation down.
Which loader style should I use?
The spinner and ring read as classic loaders, dots and bars suit inline or button loading, and pulse is a quiet single-shape option. Try each in the preview and copy the one that fits.
Can I recolour the loader to match my brand?
Yes. Set the colour and the css loader maker threads it through the whole animation, borders and dots included.
Where do I put the HTML?
Drop the loader markup wherever content is loading and remove it when the data arrives. The CSS goes in your stylesheet once.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.