Back to the library
Season arc progress
Variant: Standard
An indeterminate progress arc that sweeps a shadow-point around a fixed track while four quadrant ticks warm in turn, so a long-running job reads as advancing through phases rather than idling. The travelling head runs on a linear master clock — a wait indicator that eases would imply it knows how far along it is — while the tick warm-ups use ease so the colour change lands softly instead of snapping. Reach for it when a task takes long enough that a spinner starts to feel anxious. Reduced motion holds the arc still and keeps only the quadrant lights cycling at half pace.
loaderprogressambientarcindeterminate
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</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 */
--_track-w: 3px;
--_head: 11px;
--_tick-w: 3px;
--_tick-len: 11px;
--_dim: 0.16;
--_lit: 0.95;
--_dash: 314; /* 2*pi*50, the track circumference */
--_arc: 66; /* visible sweep length of the head trail */
}
* { 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(150px, 44vw);
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.t2 { --_i: 1; stroke: var(--clay); }
.tick.t3 { --_i: 2; stroke: var(--rust); }
.tick.t4 { --_i: 3; stroke: var(--clay-d); }
.tick.t1 { --_i: 0; }
/* The lit window is a quarter of the loop; the fade tail runs past it
so two neighbours briefly overlap, like light leaving one edge for the next. */
@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.36; }
50% { opacity: 0.62; }
}
@media (max-width: 380px) {
.card { padding: 13px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
.head-trail, .head { animation: none; }
/* Movement drops; the phase lights keep the loop alive at half pace. */
.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="4" />
<line class="tick t2" x1="116" y1="60" x2="calc(116 + var(--_tick-len))" y2="60" />
<line class="tick t3" x1="60" y1="116" x2="60" y2="calc(116 + var(--_tick-len))" />
<line class="tick t4" x1="4" y1="60" x2="calc(4 - 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.