How to Create an Animated SVG Loading Spinner with CSS

1. Why SVG Spinners Outperform GIFs, CSS Divs & Canvas

For over a decade, web developers relied on animated GIFs or complex nested <div> structures with borders to render loading spinners. Both techniques suffer from catastrophic drawbacks in modern web applications:

• Animated GIFs: Suffer from binary 1-bit alpha transparency, creating jagged pixel halos around curved edges on non-white backgrounds. Furthermore, a 32×32 animated GIF can easily weigh 40KB to 120KB and cannot be recolored with CSS.
• CSS Div Border Hacks: Using border-radius: 50% with one transparent border edge works for basic circular loops, but cannot produce the expanding and contracting arc effects popularized by Google Material Design or Apple iOS.
• Lottie & Canvas Runtimes: Shipping a 60KB+ Lottie WASM/JS runtime just to show a 24px spinner during data fetching ruins your Core Web Vitals (Largest Contentful Paint & Total Blocking Time).

SVG with CSS Keyframes solves every one of these problems. It weighs under 400 bytes, supports currentColor theming, renders with subpixel anti-aliasing on any resolution, and requires zero JavaScript execution.

2. The Underlying Mathematics: Circumference & ViewBox Geometry

To manipulate the stroke of a vector circle, you must understand the mathematical formula governing its perimeter:

This calculated value of 125.66 is the fundamental constant you use to configure your dashes and animation offsets.

3. Deconstructing stroke-dasharray and stroke-dashoffset

Two SVG presentation properties control the stroke rendering:

1. stroke-dasharray: Specifies the pattern of alternating dashes and gaps along the path. For example, stroke-dasharray: 125.66 creates a single solid dash equal to the full perimeter followed by a gap of equal length. Setting stroke-dasharray: 90, 150 creates a 90px arc with a 150px gap.
2. stroke-dashoffset: Offsets the starting location of the dash along the perimeter. Shifting the offset from 0 to -125.66 makes the visible arc travel along the circle in a continuous drawing loop.

4. Technique 1: The Google Material Expanding Arc Spinner

The iconic Material Design spinner features two simultaneous animations:

1. Container Rotation: The outer <svg> rotates 360 degrees infinitely with a linear easing curve over 2 seconds.
2. Path Morphing: The inner <circle> expands from a tiny dot to a 75% arc and contracts back over 1.5 seconds with an ease-in-out easing curve.

HTML Markup

<div class="spinner-container" role="status" aria-live="polite">
  <svg class="spinner" viewBox="0 0 50 50" aria-hidden="true">
    <circle
      class="path"
      cx="25"
      cy="25"
      r="20"
      fill="none"
      stroke="currentColor"
      stroke-width="4"
    />
  </svg>
  <span class="sr-only">Loading content, please wait...</span>
</div>

CSS Stylesheet

/* Container rotation runs on GPU compositor */
.spinner {
  animation: spinner-rotate 2s linear infinite;
  width: 48px;
  height: 48px;
  color: #C1DD2D; /* Brand color */
}

/* Arc expansion and contraction */
.spinner .path {
  stroke: currentColor;
  stroke-linecap: round;
  animation: spinner-dash 1.5s ease-in-out infinite;
}

@keyframes spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* Accessibility: respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 8s; /* Slows down motion drastically */
  }
  .spinner .path {
    animation: none;
    stroke-dasharray: 90, 150;
  }
}

5. Technique 2: The Apple-Style Stepped Segmented Spinner

In operating systems like macOS and iOS, loading indicators use segmented radial tick lines that illuminate in a clockwise sequence. You can recreate this with an 8-spoke or 12-spoke SVG path and a CSS steps() timing function:

<svg class="stepped-loader" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
  <!-- 8 radial tick marks with fading opacities -->
  <line x1="12" y1="2" x2="12" y2="6" opacity="1.0" />
  <line x1="19.07" y1="4.93" x2="16.24" y2="7.76" opacity="0.87" />
  <line x1="22" y1="12" x2="18" y2="12" opacity="0.75" />
  <line x1="19.07" y1="19.07" x2="16.24" y2="16.24" opacity="0.62" />
  <line x1="12" y1="22" x2="12" y2="18" opacity="0.50" />
  <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" opacity="0.37" />
  <line x1="2" y1="12" x2="6" y2="12" opacity="0.25" />
  <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" opacity="0.12" />
</svg>

.stepped-loader {
  width: 32px;
  height: 32px;
  color: #C1DD2D;
  animation: step-spin 0.8s steps(8) infinite;
}

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

6. Technique 3: The Pulsing Concentric Radar Wave

For data visualization dashboards, IoT status indicators, and geo-tracking applications, a radial pulsing wave signals active background synchronization:

<svg class="pulse-loader" viewBox="0 0 100 100">
  <circle class="pulse-ring ring-1" cx="50" cy="50" r="10" fill="none" stroke="#C1DD2D" stroke-width="3" />
  <circle class="pulse-ring ring-2" cx="50" cy="50" r="10" fill="none" stroke="#C1DD2D" stroke-width="3" />
  <circle cx="50" cy="50" r="6" fill="#C1DD2D" />
</svg>

.pulse-loader {
  width: 56px;
  height: 56px;
}

.pulse-ring {
  transform-origin: center;
  animation: pulse-wave 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.ring-2 {
  animation-delay: 0.6s;
}

@keyframes pulse-wave {
  0% {
    r: 10;
    opacity: 0.9;
  }
  100% {
    r: 42;
    opacity: 0;
  }
}

7. Production Component in React & TypeScript

In enterprise design systems, engineers need a parameterized component supporting dynamic sizing, color inheritance, and accessible labeling:

// src/components/LoadingSpinner.tsx
import React from 'react';

interface LoadingSpinnerProps {
  size?: number | string;
  className?: string;
  label?: string;
}

export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  size = 24,
  className = '',
  label = 'Loading data...',
}) => {
  return (
    <div role="status" aria-live="polite" className={`inline-flex items-center justify-center ${className}`}>
      <svg
        style={{ width: size, height: size }}
        className="animate-spin text-lime-400"
        viewBox="0 0 50 50"
        fill="none"
        aria-hidden="true"
      >
        {/* Background muted track */}
        <circle
          cx="25"
          cy="25"
          r="20"
          stroke="currentColor"
          strokeWidth="4"
          className="opacity-20"
        />
        {/* Active spinning arc */}
        <circle
          cx="25"
          cy="25"
          r="20"
          stroke="currentColor"
          strokeWidth="4"
          strokeLinecap="round"
          strokeDasharray="90, 150"
          strokeDashoffset="-35"
        />
      </svg>
      <span className="sr-only">{label}</span>
    </div>
  );
};

8. Tailwind CSS Implementation

If your project utilizes Tailwind CSS, you don't even need custom CSS files. You can construct an elegant spinner using built-in utility classes:

<!-- Instant Tailwind Spinner -->
<svg class="animate-spin h-6 w-6 text-lime-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

9. Performance Comparison: GIF vs. CSS SVG vs. Lottie

We measured memory footprint, network payload, and frame rate across 100 simultaneous loading spinner instances on a simulated mid-tier mobile device:

Frequently Asked Questions