CSS Loader Generator

Generate pure-CSS loading spinners for free — spinner rings, dual rings, bouncing dots, equaliser bars, pulses and progress bars. Set the colour, size and speed, preview live, and copy the HTML and CSS. No JavaScript or images needed.

100% private — everything runs in your browser. Conversion happens on your device; nothing is uploaded.

Style

Colour

Size (px)

Duration (s)

HTML

CSS

Pure CSS — no JavaScript or images, so loaders are tiny and render instantly. Add aria-label or role=”status” to the element so screen readers announce loading.

How to create a CSS loader

Pick a loader style.
Set the colour, size and animation duration.
Check the live preview.
Copy the HTML and CSS into your project.

What you can use it for

Loading states for buttons, forms and pages
Placeholders while data or images load
Lightweight spinners for WordPress and landing pages
Progress indicators for apps and dashboards

More free tools

Building for the web?

Format, minify, convert and generate code with our free, private developer tools.

JSON Formatter CSS Minifier HTML Minifier JS Minifier SVG Optimizer CSS Grid Box Shadow Gradient Generator

See all free tools →

Frequently asked questions

How do I make a loading spinner with CSS?

Choose a style and colour here, then copy the HTML element and CSS keyframes into your page. The animation runs with CSS alone.

Why use a CSS loader instead of a GIF?

CSS loaders are tiny, crisp at any size, easy to recolour and don't need an extra download.

How do I make a loader accessible?

Add role="status" and an aria-label such as “Loading” to the loader element, and respect prefers-reduced-motion if you can.