Animations.
Back to the library

Season arc progress (heavy)

Variant: Heavy

The full-weight reading: a thick track, a large head that reads at a glance across a room, long quadrant ticks and a near-opaque lit state. Same 8s linear orbit and same quarter-cycle tick schedule as the standard — only stroke, radius and opacity range are dialled up, so the two can be swapped without retiming anything. Use it for a full-screen processing state or an empty view where the loader is the only thing on the page.

loaderprogressboldarcindeterminate

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>Season arc progress — heavy</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;
  --round: 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
     (#d97757 / #b85c3e / #788c5d / #b04a3f). */
  --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));

  /* Clock — every duration in the document runs off --t. */
  --cycle: 8s; /* the authored master loop */
  --t: calc(var(--cycle) / var(--speed));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* File-specific tokens — the weight axis lives here. */
  --_track-w: 7px;
  --_head: 19px;
  --_tick-w: 6px;
  --_tick-len: 15px;
  --_dim: 0.2;
  --_lit: 1;
  --_dash: 314;
  --_arc: 92;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

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

.card {
  width: min(320px, 92vw);
  padding: clamp(14px, 4vw, 22px);
  border-radius: calc(16px * var(--round));
  background: var(--paper);
  border: 1px solid var(--oat);
  display: grid;
  justify-items: center;
  gap: clamp(10px, 3vw, 14px);
}

.dial {
  position: relative;
  width: min(158px, 46vw);
  aspect-ratio: 1;
}

svg { display: block; width: 100%; height: 100%; overflow: visible; }

.track {
  fill: none;
  stroke: var(--oat);
  stroke-width: var(--_track-w);
}

.head-trail {
  fill: none;
  stroke: var(--clay);
  stroke-width: var(--_track-w);
  stroke-linecap: round;
  stroke-dasharray: var(--_arc) calc(var(--_dash) - var(--_arc));
  transform-origin: 50% 50%;
  /* Linear: an indeterminate wait must not imply it knows its own position. */
  animation: orbit var(--t) linear infinite;
}

.head {
  fill: var(--clay-d);
  transform-origin: 50% 50%;
  animation: orbit var(--t) linear infinite;
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.tick {
  stroke-width: var(--_tick-w);
  stroke-linecap: round;
  stroke: var(--olive);
  opacity: var(--_dim);
  animation: warm var(--t) ease infinite;
  animation-delay: calc(var(--_i) * var(--t) / 4);
}

.tick.t1 { --_i: 0; }
.tick.t2 { --_i: 1; stroke: var(--clay); }
.tick.t3 { --_i: 2; stroke: var(--rust); }
.tick.t4 { --_i: 3; stroke: var(--clay-d); }

@keyframes warm {
  0%   { opacity: var(--_dim); }
  4%   { opacity: var(--_lit); }
  22%  { opacity: var(--_lit); }
  40%  { opacity: var(--_dim); }
  100% { opacity: var(--_dim); }
}

.caption {
  font-size: clamp(11px, 3vw, 12.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0.5;
  animation: breathe calc(var(--t) / 2) ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.72; }
}

@media (max-width: 380px) {
  .card { padding: 13px; gap: 9px; }
  .dial { width: min(158px, 42vw); }
}

@media (prefers-reduced-motion: reduce) {
  .head-trail, .head { animation: none; }
  .tick {
    animation: warm calc(var(--t) * 2) ease infinite;
    animation-delay: calc(var(--_i) * var(--t) * 2 / 4);
  }
  .caption { animation: breathe var(--t) ease-in-out infinite; }
}
</style>
</head>
<body>
  <div class="card">
    <div class="dial">
      <svg viewBox="0 0 120 120" aria-hidden="true">
        <circle class="track" cx="60" cy="60" r="50" />
        <circle class="head-trail" cx="60" cy="60" r="50" transform="rotate(-90 60 60)" />
        <g class="head">
          <circle cx="60" cy="10" r="calc(var(--_head) / 2)" />
        </g>
        <g fill="none">
          <line class="tick t1" x1="60" y1="calc(10 - var(--_tick-len))" x2="60" y2="2" />
          <line class="tick t2" x1="118" y1="60" x2="calc(118 + var(--_tick-len))" y2="60" />
          <line class="tick t3" x1="60" y1="118" x2="60" y2="calc(118 + var(--_tick-len))" />
          <line class="tick t4" x1="2" y1="60" x2="calc(2 - var(--_tick-len))" y2="60" />
        </g>
      </svg>
    </div>
    <div class="caption">Working</div>
  </div>
</body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.

Season arc progress

Standard

Season arc progress (hairline)

Hairline