Double Ring Spinner: Pure CSS Loading Animation

Double Ring Spinner

Two concentric arcs turning in opposite directions, the inner one faster and lighter. Busier than a single ring but still calm, and it is two SVG circles with one shared keyframe.

Also known as: concentric circle spinner, counter rotating rings, two ring loader.

Color Size 64px Dark background

HTML

<svg class="ldr-double-ring" viewBox="0 0 48 48" role="status" aria-label="Loading">
  <circle class="ldr-double-ring-outer" cx="24" cy="24" r="20" pathLength="100"></circle>
  <circle class="ldr-double-ring-inner" cx="24" cy="24" r="11" pathLength="100"></circle>
</svg>

CSS

.ldr-double-ring {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-double-ring circle {
  fill: none;
  stroke: var(--c);
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: center;
}
.ldr-double-ring-outer {
  stroke-dasharray: 30 70;
  animation: ldr-double-ring-spin 1s linear infinite;
}
.ldr-double-ring-inner {
  stroke-dasharray: 40 60;
  opacity: 0.5;
  animation: ldr-double-ring-spin 0.75s linear infinite reverse;
}
@keyframes ldr-double-ring-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-double-ring, .ldr-double-ring *, .ldr-double-ring::before, .ldr-double-ring::after, .ldr-double-ring *::before, .ldr-double-ring *::after {
    animation-duration: 3s;
  }
}

Tailwind CSS version

The same loader using only Tailwind's built-in animation utilities. No custom keyframes or config needed.

<svg class="h-12 w-12 text-blue-500" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" role="status" aria-label="Loading">
  <circle class="origin-center animate-spin" cx="24" cy="24" r="20" pathLength="100" stroke-dasharray="30 70"></circle>
  <circle class="origin-center animate-spin opacity-50 [animation-direction:reverse] [animation-duration:0.75s]" cx="24" cy="24" r="11" pathLength="100" stroke-dasharray="40 60"></circle>
</svg>

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Double Ring Spinner

HTML

CSS

Tailwind CSS version

Customizing this loader

Similar loaders