← All text tools

CSS loader generator

Spinners and loading animations in pure CSS, with your colours and size.

  • Free
  • No sign-up
  • Works on any device

About CSS loader generator

Pick a spinner, dots, bars or pulse animation, set its colour and size and copy the pure CSS. No images or JavaScript are needed, so the loader appears instantly even on slow connections. Add a text label or aria-busy attribute so screen reader users also know something is loading.

How to use CSS loader generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

Is a CSS loader better than a GIF?

Usually yes. CSS loaders are tiny, scale on any screen, change colour with one variable and avoid an extra network request, while a GIF is heavier and blurry on high-density displays.

Is CSS loader generator free?

Yes. CSS loader generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools