Back to the library
Gnomon sweep, heavy
Variant: Heavy
The loudest weight of the dial: a thick gnomon with a wide cast wedge crossing chunky hour marks, sized to hold a mostly-empty screen. Reach for it on a full-page or empty-state wait where the sweep is the only thing on screen and needs to carry the frame. Rotation speed, easing and tick offsets are identical to the lighter siblings — only stroke, radius, wedge spread and dial scale change, so swapping weights never changes the perceived pace.
loaderambientstatussweepdial
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>Gnomon sweep — 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: 9.6s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
/* Weight axis for this sibling. */
--_arm: 6px;
--_tick: 5px;
--_ring: 3.5px;
--_hub: 10px;
--_wedge: 0.3;
--_glow: 1;
--_dial: min(244px, 68vw);
}
* { box-sizing: border-box; }
body {
margin: 0;
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);
}
.card {
width: min(360px, 92vw);
padding: clamp(14px, 4.5vw, 24px);
border-radius: calc(16px * var(--round));
background: var(--paper);
border: 1px solid var(--oat);
display: grid;
justify-items: center;
gap: clamp(10px, 3vw, 16px);
}
.dial {
width: var(--_dial);
height: calc(var(--_dial) / 2);
position: relative;
}
.dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ring {
fill: none;
stroke: var(--oat);
stroke-width: var(--_ring);
}
.tick {
stroke: var(--oat);
stroke-width: var(--_tick);
stroke-linecap: round;
/* Each mark warms as the arm crosses it: delay = its share of the sweep. */
animation: tick-warm calc(var(--t)) var(--ease-out) infinite;
animation-delay: calc(var(--t) * var(--_i) / 6);
}
.tick:nth-of-type(1) { --_i: 0; }
.tick:nth-of-type(2) { --_i: 1; }
.tick:nth-of-type(3) { --_i: 2; }
.tick:nth-of-type(4) { --_i: 3; }
.tick:nth-of-type(5) { --_i: 4; }
.tick:nth-of-type(6) { --_i: 5; }
.tick:nth-of-type(7) { --_i: 6; }
@keyframes tick-warm {
0% { stroke: var(--oat); }
3% { stroke: var(--clay); }
26% { stroke: var(--clay-d); }
70%, 100% { stroke: var(--oat); }
}
.arm-group {
transform-origin: 100px 100px; /* the hub, not the box centre */
animation: sweep var(--t) linear infinite;
}
@keyframes sweep {
from { transform: rotate(-90deg); }
to { transform: rotate(90deg); }
}
.wedge { fill: var(--clay); opacity: var(--_wedge); }
.arm {
stroke: var(--slate);
stroke-width: var(--_arm);
stroke-linecap: round;
}
.arm-tip {
fill: var(--clay);
opacity: var(--_glow);
}
.hub { fill: var(--slate); }
.label {
font-size: clamp(11px, 3.1vw, 13px);
letter-spacing: 0.06em;
color: color-mix(in oklab, var(--slate) 62%, var(--ivory));
display: flex;
align-items: center;
gap: 8px;
}
.dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--clay);
animation: breathe calc(var(--t) / 3) var(--ease-out) infinite;
}
@keyframes breathe {
0%, 100% { opacity: 0.35; }
45% { opacity: 1; }
}
@media (max-width: 380px) {
.card { padding: 12px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
/* Movement drops; the dial still keeps time through colour alone. */
.arm-group { animation: none; transform: rotate(0deg); }
.tick {
animation: tick-warm calc(var(--t) * 2) var(--ease-out) infinite;
animation-delay: calc(var(--t) * 2 * var(--_i) / 6);
}
.dot { animation: breathe calc(var(--t) * 2 / 3) var(--ease-out) infinite; }
}
</style>
</head>
<body>
<div class="card">
<div class="dial">
<svg viewBox="0 0 200 104" role="img" aria-label="Working">
<path class="ring" d="M 14 100 A 86 86 0 0 1 186 100" />
<line class="tick" x1="14" y1="100" x2="34" y2="100" />
<line class="tick" x1="25.5" y1="56.9" x2="42.8" y2="66.9" />
<line class="tick" x1="57" y1="25.5" x2="67" y2="42.8" />
<line class="tick" x1="100" y1="14" x2="100" y2="34" />
<line class="tick" x1="143" y1="25.5" x2="133" y2="42.8" />
<line class="tick" x1="174.5" y1="56.9" x2="157.2" y2="66.9" />
<line class="tick" x1="186" y1="100" x2="166" y2="100" />
<g class="arm-group">
<path class="wedge" d="M 100 100 L 100 22 A 78 78 0 0 1 134 30 Z" />
<line class="arm" x1="100" y1="100" x2="100" y2="26" />
<circle class="arm-tip" cx="100" cy="26" r="6" />
</g>
<circle class="hub" cx="100" cy="100" r="var(--_hub)" />
</svg>
</div>
<div class="label"><span class="dot"></span>Gathering the season's data</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.