CSS Spinner / Loader Generator

Pick a spinner style, color, size, and speed, then copy the HTML and CSS. All spinners are pure CSS — no JavaScript, no images, no external library. They work in every modern browser and respect prefers-reduced-motion when the user has motion-reduction turned on.

How to use the CSS Spinner / Loader Generator

Pick a style and tweak color, size, and animation speed. The preview updates live and the HTML / CSS snippets below are ready to paste into your project. Each generated CSS block includes a @media (prefers-reduced-motion: reduce) rule that stops the animation for users who’ve enabled motion reduction in their OS settings.

About CSS Spinner / Loader Generator

Loading indicators are everywhere, but most landing pages don’t need a JavaScript spinner library for one occasional spinner on a form submit. Pure-CSS spinners weigh nothing extra (just a few hundred bytes of CSS), animate smoothly via the GPU, and don’t need anything to initialise. The trade-off is that you can’t programmatically control animation phase — you just toggle the element’s visibility. For 90% of UI loading indicators (form submits, lazy-loaded sections, modal opens), that’s exactly what you want.

All six styles use the same underlying CSS approach: a single element (sometimes with pseudo-elements) animated with @keyframes. Hardware-accelerated transforms keep the animation smooth even on low-end devices. The accessibility-conscious prefers-reduced-motion rule means users sensitive to motion don’t see a frantic spinner.

Common use cases

• Form submit states — show a spinner while POST is in flight.
• Lazy-loaded content — placeholder before images / data arrive.
• Modal / drawer opens — short spinner while initial data fetches.
• Email confirmations — “We’re sending…” states.