Animations.
Back to the library

Progress arc

A determinate progress ring driven by stroke-dashoffset, starting at twelve o’clock where the eye expects it. Use it when you actually know the percentage; for unknown waits, an indeterminate spinner is the honest choice. The arc eases in and out because it is travelling across the ring, not entering the screen.

loadingsvg

The source

A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Progress arc</title>
    <style>
      :root {
        /* Neutrals — fixed, never remixed. */
        --ivory: #faf9f5;
        --paper: #ffffff;
        --oat: #e3dacc;
        --slate: #141413;

        /* Knobs — the remix API. A knob exists iff declared here and used below. */
        --hue: 38.8;
        --lift: 0;
        --chroma: 1;
        --speed: 1;

        /* Accents — derived from the knobs with the family's offsets baked in,
           so one hue roll moves them together. Defaults reproduce the original hex. */
        --clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
        --clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
        --olive: oklch(
          calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
        );
        --rust: oklch(
          calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
        );

        --_label: #87867f;

        /* Clock — every duration in the document runs off --t. */
        --cycle: 3.6s;
        --t: calc(var(--cycle) / var(--speed));
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: var(--ivory);
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          sans-serif;
        color: var(--slate);
      }

      .arc {
        position: relative;
        width: 108px;
        height: 108px;
      }

      .arc svg {
        width: 100%;
        height: 100%;
        /* -90deg so the arc starts at twelve o'clock, where a progress ring is
           read from. Static rotation, not animated. */
        transform: rotate(-90deg);
      }

      .arc circle {
        fill: none;
        stroke-linecap: round;
        stroke-width: 5;
      }

      .arc .track {
        stroke: var(--oat);
      }

      /* Determinate progress: stroke-dashoffset is the only property that maps
         to "how far along", and it is paint-only. ease-in-out because the arc is
         travelling across the ring, not entering the screen. */
      .arc .fill {
        stroke: var(--clay);
        stroke-dasharray: 302;
        animation: fill-arc var(--t) infinite;
      }

      .arc .label {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 15px;
        font-variant-numeric: tabular-nums;
        color: var(--_label);
        letter-spacing: -0.01em;
      }

      @keyframes fill-arc {
        0% {
          stroke-dashoffset: 302;
          animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
        }
        55%,
        88% {
          stroke-dashoffset: 0;
        }
        96%,
        100% {
          stroke-dashoffset: 302;
          opacity: 0;
        }
      }

      /* Reduced-motion sweep: same claim as the full version — this is
         determinate progress, and progress that never advances is not progress
         — but taken at 9s instead of 3.6s and with a linear, unhurried travel
         instead of the sharp ease. stroke-dashoffset is paint-only, and the
         reset is hidden behind a gentle dip to 0.35 opacity so the ring
         crossfades back to empty rather than snapping or visibly rewinding. */
      @media (prefers-reduced-motion: reduce) {
        .arc .fill {
          animation: fill-arc-reduced calc(var(--t) * 2.5) linear infinite;
        }
      }

      @keyframes fill-arc-reduced {
        0% {
          stroke-dashoffset: 302;
          opacity: 1;
        }
        72% {
          stroke-dashoffset: 0;
          opacity: 1;
        }
        84% {
          stroke-dashoffset: 0;
          opacity: 1;
        }
        /* The ring fades out completely before the dash unwinds, so the reset is
           never seen. Rewinding while still visible reads as a fast backwards
           whip — the exact opposite of the thing this piece claims. */
        92% {
          stroke-dashoffset: 0;
          opacity: 0;
        }
        93% {
          stroke-dashoffset: 302;
          opacity: 0;
        }
        100% {
          stroke-dashoffset: 302;
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="arc" role="img" aria-label="Progress">
      <svg viewBox="0 0 108 108">
        <circle class="track" cx="54" cy="54" r="48" />
        <circle class="fill" cx="54" cy="54" r="48" />
      </svg>
      <span class="label">Uploading</span>
    </div>
  </body>
</html>