Claude Made These Animated Spinners - Who Did It Best? (EP05)

Sandy Lane

•April 18, 2026

Video: Claude Made These Animated Spinners - Who Did It Best? (EP05) by Taught by Celeste AI - AI Coding Coach

Animated SVG Loading Spinners with CSS: Comparing Claude Models

This episode explores creating animated loading spinners using SVG and CSS animations, generated by different Claude AI models in a coding challenge. Each model produced a standalone HTML file featuring multiple animated elements with staggered timing and smooth easing, aiming for visual polish and clean code.

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated SVG Spinner</title>
    <style>
      /* Center spinner on page */
      body, html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #121212;
      }

      svg {
        width: 200px;
        height: 200px;
        overflow: visible;
      }

      /* Breathing center core */
      .core {
        fill: #ff6f61;
        animation: breathe 3s ease-in-out infinite;
      }

      @keyframes breathe {
        0%, 100% { r: 10; opacity: 1; }
        50% { r: 14; opacity: 0.7; }
      }

      /* Concentric rings */
      .ring {
        fill: none;
        stroke-width: 4;
        stroke-linecap: round;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-iteration-count: infinite;
      }

      .ring1 {
        stroke: #ff6f61;
        stroke-dasharray: 283;
        stroke-dashoffset: 0;
        animation-name: spin;
        animation-duration: 6s;
        animation-direction: normal;
      }

      .ring2 {
        stroke: #f9a825;
        stroke-dasharray: 188;
        stroke-dashoffset: 0;
        animation-name: spin-reverse;
        animation-duration: 4s;
        animation-direction: normal;
        animation-delay: 0.2s;
      }

      .ring3 {
        stroke: #29b6f6;
        stroke-dasharray: 125;
        stroke-dashoffset: 0;
        animation-name: spin;
        animation-duration: 5s;
        animation-direction: normal;
        animation-delay: 0.4s;
      }

      @keyframes spin {
        0% { stroke-dashoffset: 0; transform: rotate(0deg); }
        100% { stroke-dashoffset: 283; transform: rotate(360deg); }
      }

      @keyframes spin-reverse {
        0% { stroke-dashoffset: 0; transform: rotate(0deg); }
        100% { stroke-dashoffset: 188; transform: rotate(-360deg); }
      }

      /* Orbiting dots */
      .dot {
        fill: #ffca28;
        transform-origin: 100px 100px;
        animation-name: pulse;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }

      @keyframes pulse {
        0%, 100% { r: 6; opacity: 1; }
        50% { r: 9; opacity: 0.6; }
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 200 200" aria-label="Loading spinner" role="img">
      <circle class="core" cx="100" cy="100" r="10" />

      <circle class="ring ring1" cx="100" cy="100" r="45" />
      <circle class="ring ring2" cx="100" cy="100" r="30" />
      <circle class="ring ring3" cx="100" cy="100" r="20" />

      <g>
        <circle class="dot" cx="145" cy="100" r="6" style="animation-delay: 0s" />
        <circle class="dot" cx="135" cy="135" r="6" style="animation-delay: 0.25s" />
        <circle class="dot" cx="100" cy="145" r="6" style="animation-delay: 0.5s" />
        <circle class="dot" cx="65" cy="135" r="6" style="animation-delay: 0.75s" />
        <circle class="dot" cx="55" cy="100" r="6" style="animation-delay: 1s" />
        <circle class="dot" cx="65" cy="65" r="6" style="animation-delay: 1.25s" />
        <circle class="dot" cx="100" cy="55" r="6" style="animation-delay: 1.5s" />
        <circle class="dot" cx="135" cy="65" r="6" style="animation-delay: 1.75s" />
      </g>
    </svg>
  </body>
</html>

Key Points

SVG elements provide crisp, scalable graphics ideal for animated spinners.
CSS animations with easing and staggered delays create smooth, visually appealing motion.
Multiple animated components, like concentric rings and orbiting dots, add depth and complexity.
Centering the spinner with flexbox ensures consistent positioning across screen sizes.
Clean structure and thoughtful color palettes enhance readability and visual polish.