CSS Loader Generator
The CSS Loader Generator creates pure CSS loading animations in six styles — spinner, bouncing dots, ring, pulse, bars and dual ring — with adjustable size, color, speed and thickness, and outputs both CSS and HTML.
About this tool
The CSS Loader Generator creates pure CSS loading animations in six styles — spinner, bouncing dots, ring, pulse, bars and dual ring — with adjustable size, color, speed and thickness, and outputs both CSS and HTML.
How to use it
- Choose a loader style.
- Adjust size, color, speed and thickness.
- Check the live preview.
- Click Copy CSS + HTML and paste both into your page.
Good to know
- Pure CSS loaders need no images, GIFs or JavaScript.
- Spinners rotate with @keyframes and transform: rotate(), which is efficient to animate.
- The markup is a single element, or a few child elements for dots and bars.
- Add role="status" and a visually hidden label such as “Loading…” so screen readers announce the loader.
- Consider slowing or pausing loaders under prefers-reduced-motion.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I make a loading spinner in CSS?
Give a square element a border with one colored side, border-radius: 50%, and a rotating @keyframes animation — or copy one from this generator.
Are CSS loaders better than GIFs?
Usually yes: they are smaller, stay sharp at any size, and their color and speed can be changed with CSS.
How do I make a loader accessible?
Wrap it in an element with role="status" and include hidden text like “Loading…” so assistive technology can announce it.
How do I center the loader on the page?
Place it in a container with display: flex; justify-content: center; align-items: center;.