CSS Loader & Spinner Generator

Generate pure-CSS loading spinners, dots, bars, pulse and ring animations in your colour and size.

How do I make a loading spinner in CSS?

A CSS spinner is a small element animated with @keyframes — for example a circle with one coloured border segment that rotates 360° in a loop. Pick a type, colour, size and speed and copy the generated HTML and CSS; no images or JavaScript are needed.

Make it accessible

Add role="status" and visually hidden text such as “Loading…” so screen-reader users know something is happening, and respect prefers-reduced-motion for users who turn off animations.

Frequently asked questions

Are CSS loaders faster than GIFs?

Yes — a few hundred bytes of CSS, sharp at any size and themeable.

Can I change the colour with a variable?

Yes, replace the colour with var(--your-colour).

Is it free?

Yes.