Build lightweight loaders

CSS Loader Generator

Choose a loader style, color, size, and animation speed to generate a simple loading indicator with copy-ready markup.

Loader controls

Switch styles and preview the motion immediately.

Live preview

Check the scale and animation before exporting.

Popular ways to use it

Use it for button loading states, page placeholders, API waits, card refresh actions, or modal progress indicators.

  • Button loading states
  • Dashboard data fetch indicators
  • Modal waiting states
  • Image loading placeholders

How to get a good result

  1. 1. Choose the loader type and size.
  2. 2. Adjust speed and color.
  3. 3. Copy the HTML and CSS when the preview looks right.

Related tools

CSS Button GeneratorGradient GeneratorPage Speed Tips

Quick questions

Which loader types are included?

This page includes spinner, dots, bars, ring, and pulse styles.

Can I copy both HTML and CSS?

Yes. The page outputs matching HTML and CSS snippets for the selected loader.

Is the preview animated?

Yes. The preview updates live so you can judge speed and scale before copying.