Does this work with prefers-reduced-motion?

Out of the box no — but you can wrap the @keyframes in a media query: @media (prefers-reduced-motion: no-preference) { ... }. Recommended for accessibility.

Developer Utilities · Free tool

CSS Loader Generator

5 pure-CSS loader/spinner styles. Tunable color, size, speed. No JS, no images, no dependencies.

Updated May 2026

ColorSize (48px)Speed (1s)

CSS

.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #0f766e40;
  border-top-color: #0f766e;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

HTML

<div class="loader"></div>

Found this useful?Email

What it does

5 CSS loader / spinner styles (spinner, dots, pulse, bars, ring) with adjustable color, size, and animation speed. Pure CSS — no JS, no images, no external dependencies.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/css-loader-generator" width="100%" height="720" frameborder="0" loading="lazy" title="CSS Loader Generator" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Pick a loader style.
Customize color, size, and speed.
Copy the CSS and HTML into your project.

Frequently asked questions

Does this work with prefers-reduced-motion?: Out of the box no — but you can wrap the @keyframes in a media query: @media (prefers-reduced-motion: no-preference) { ... }. Recommended for accessibility.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →