Animations.
Back to the library

Rosetta sync key

Variant: Standard

A three-register sync indicator: the same progress value is stated simultaneously as a sweeping arc, a filling bar, and a row of discrete ticks, so the meaning of the motion can be decoded from any one of the three. Reach for it when a background sync or upload needs an ambient status that reads at a glance without a percentage label. The arc runs linear because it is a constant-rate clock, while the tick row snaps in steps so the eye has a countable reference against the smooth registers. This is the standard weight — the default balance of stroke and travel for a card or panel header.

loaderprogressstatusambientsvg

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>Rosetta sync key — standard</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: 4s;
  --t: calc(var(--cycle) / var(--speed));

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

  /* File-specific: register weights and the arc geometry. */
  --_stroke: 3.5px;
  --_arc-len: 176;
  --_track: color-mix(in oklab, var(--oat) 82%, var(--ivory));
  --_tick-w: 3px;
  --_bar-h: 7px;
  --_dim: 0.34;
}

* { 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;
}

.key {
  width: min(360px, 90vw);
  padding: clamp(14px, 4vw, 22px);
  background: var(--paper);
  border: 1px solid var(--_track);
  border-radius: calc(14px * var(--round));
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(12px, 4vw, 20px);
}

/* Register 1 — continuous arc. */
.dial { display: block; width: clamp(58px, 19vw, 76px); height: auto; }
.dial circle { fill: none; }
.dial .track { stroke: var(--_track); stroke-width: var(--_stroke); }
.dial .sweep {
  stroke: var(--clay);
  stroke-width: var(--_stroke);
  stroke-linecap: round;
  stroke-dasharray: var(--_arc-len);
  stroke-dashoffset: var(--_arc-len);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: arc-sweep var(--t) linear infinite;
}
.dial .hub {
  fill: var(--clay);
  opacity: var(--_dim);
  transform-origin: 50% 50%;
  animation: hub-beat var(--t) var(--ease-out) infinite;
}

.registers { display: grid; gap: clamp(9px, 3vw, 13px); min-width: 0; }

/* Register 2 — proportional bar. */
.bar {
  position: relative;
  height: var(--_bar-h);
  border-radius: 999px;
  background: var(--_track);
  overflow: hidden;
}
.bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--clay-d);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: bar-fill var(--t) linear infinite;
}

/* Register 3 — discrete ticks, the countable cross-reference. */
.ticks { display: flex; gap: clamp(4px, 1.6vw, 7px); align-items: flex-end; }
.ticks i {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 16px;
  border-radius: 999px;
  background: var(--_track);
  position: relative;
  overflow: hidden;
}
.ticks i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--olive);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: 50% 100%;
  animation: tick-set var(--t) var(--ease-out) infinite;
  /* Each tick lands one eighth of the loop after the previous — the
     stepped register that lets the smooth ones be read as a quantity. */
  animation-delay: calc(var(--_i) * var(--t) / 8);
}
.ticks i:nth-child(1) { --_i: 0; }
.ticks i:nth-child(2) { --_i: 1; }
.ticks i:nth-child(3) { --_i: 2; }
.ticks i:nth-child(4) { --_i: 3; }
.ticks i:nth-child(5) { --_i: 4; }
.ticks i:nth-child(6) { --_i: 5; }
.ticks i:nth-child(7) { --_i: 6; }
.ticks i:nth-child(8) { --_i: 7; }

@keyframes arc-sweep {
  0%   { stroke-dashoffset: var(--_arc-len); }
  88%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes bar-fill {
  0%   { transform: scaleX(0); }
  88%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

@keyframes tick-set {
  0%, 1%   { opacity: 0; transform: scaleY(0.4); }
  9%       { opacity: 1; transform: scaleY(1); }
  88%      { opacity: 1; transform: scaleY(1); }
  100%     { opacity: 0; transform: scaleY(0.4); }
}

@keyframes hub-beat {
  0%, 84%  { opacity: var(--_dim); transform: scale(0.9); }
  92%      { opacity: 1; transform: scale(1); }
  100%     { opacity: var(--_dim); transform: scale(0.9); }
}

@media (max-width: 380px) {
  .key { gap: 12px; padding: 13px; }
  .ticks i { height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep one slow opacity cycle per register so the three-way reading
     survives; drop sweep, fill and travel. */
  .dial .sweep {
    animation: none;
    stroke-dashoffset: calc(var(--_arc-len) * 0.28);
  }
  .dial .hub {
    animation: hub-beat calc(var(--t) * 2.2) var(--ease-out) infinite;
    transform: none;
  }
  .bar::after { animation: none; transform: scaleX(0.72); }
  .ticks i::after {
    animation: reduced-hold calc(var(--t) * 2.2) linear infinite;
    animation-delay: calc(var(--_i) * var(--t) / 8);
    transform: none;
  }
  @keyframes hub-beat {
    0%, 100% { opacity: var(--_dim); }
    50%      { opacity: 1; }
  }
  @keyframes reduced-hold {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
  }
}
</style>
</head>
<body>
  <div class="key" role="img" aria-label="Sync progress shown three ways">
    <svg class="dial" viewBox="0 0 64 64" aria-hidden="true">
      <circle class="track" cx="32" cy="32" r="28" />
      <circle class="sweep" cx="32" cy="32" r="28" />
      <circle class="hub" cx="32" cy="32" r="5" />
    </svg>
    <div class="registers">
      <div class="bar"></div>
      <div class="ticks">
        <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
      </div>
    </div>
  </div>
</body>
</html>

The variant family

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

Rosetta sync key

Hairline

Rosetta sync key

Heavy

Rosetta sync key

Ghost