CSS Loading Spinners: Stop Using a Library for a 10-Line Animation

Most UI libraries ship a loading spinner that requires importing a component, adding a provider, and including an icon set. For a rotating circle. Here's how to build every common spinner type in pure CSS — copy-paste, no dependencies.

The classic border spinner (12 lines)

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

This is the spinner 90% of interfaces need. Adjust the border-top-color for your brand color, width/height for size, and the animation duration for speed.

Dual-ring spinner

.spinner-dual {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top-color: #6366f1;
  border-bottom-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

Pulsing dots

.dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dot {
  width: 8px;
  height: 8px;
  background: #6366f1;
  border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

Accessibility: always include aria-label

Pure CSS spinners are invisible to screen readers. Add role and aria attributes so assistive technology announces the loading state:

<div
  class="spinner"
  role="status"
  aria-label="Loading"
  aria-live="polite"
></div>

Respect prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.5s; }
  /* Or stop animation entirely: animation: none; */
}

Want to preview different spinner styles and copy the CSS instantly? Aarunya CSS Spinner Generator shows live previews of every type with configurable color, size, and speed — copy the CSS in one click.