CSS Loader Generator

How the generated CSS works

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

The loader is a circle drawn with a thick border. The border-top-color rule paints only the top of the ring with the accent color, so the ring reads as an arc, and the @keyframes spin rule rotates it around its center. Rotating with transform: rotate() keeps the animation cheap, because the browser moves the element on the compositor instead of redrawing it frame by frame.

To show it on a page, add one element and load the CSS:

<div class="loader" role="status" aria-label="Loading"></div>

Make it accessible

• Add role="status" so screen readers announce the loader.
• Set aria-label to the status text, for example “Loading”.
• Do not hide content behind a loader for more than a few seconds without a timeout fallback.
• Respect prefers-reduced-motion. Replace the spinning animation with a simple fade or a static “Loading…” text for users who opted out:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

When to use a loader vs. optimistic UI

• < 100ms response: no loader needed; the human eye barely perceives the delay.
• 100ms – 1s: a subtle loader (small spinner, button text “Loading…”) prevents double-clicks.
• 1s – 10s: a prominent loader, ideally with progress if measurable.
• > 10s: not a spinner problem, find out what is slow and fix it.

For form submits and button clicks, an in-button spinner is usually better than a full-page overlay.