Swap

No dependencies
Code format
React + Tailwind
const S = 0.3; // dot spacing, em
const R = S / 2; // each swap circles the pair's midpoint
const DOT = 0.16;
const STEPS = 6; // left pair, right pair, three times over: everyone is home again
const STEP = 0.46;
const T = STEPS * STEP;
const MOTION = 0.7;
const ease = (u: number) => (u < 0.5 ? 4 * u ** 3 : 1 - (-2 * u + 2) ** 3 / 2);
const pct = (t: number) => `${(t * 100).toFixed(2)}%`;

const slot = [0, 1, 2];
const frames: string[][] = [[], [], []];
const at = (i: number, t: number, x: number, y: number, s: number, o: number, z: number) =>
  frames[i].push(`${pct(t)} { transform: translate(${x.toFixed(4)}em, ${y.toFixed(4)}em) scale(${s.toFixed(3)}); opacity: ${o.toFixed(2)}; z-index: ${z}; }`);
slot.forEach((p, i) => at(i, 0, p * S, 0, 1, 1, 1));
for (let k = 0; k < STEPS; k++) {
  const p = k % 2;
  const over = slot.indexOf(p); // moves right, passing in front
  const under = slot.indexOf(p + 1); // moves left, passing behind
  const m = (p + 0.5) * S;
  const t0 = k / STEPS;
  for (let j = 0; j <= 10; j++) {
    const e = ease(j / 10);
    const t = t0 + ((j / 10) * MOTION) / STEPS;
    const lift = Math.sin(Math.PI * e);
    at(over, t, m - R * Math.cos(Math.PI * e), -R * lift, 1 + 0.24 * lift, 1, 2);
    at(under, t, m + R * Math.cos(Math.PI * e), R * lift, 1 - 0.24 * lift, 1 - 0.45 * lift, 0);
  }
  slot[over] = p + 1;
  slot[under] = p;
}
slot.forEach((p, i) => at(i, 1, p * S, 0, 1, 1, 1));

const css = `
  .loader-swap { --ink: light-dark(#373a40, #f1f2f3); position: relative; display: inline-block; font-size: 120px; width: ${(2 * S + DOT).toFixed(2)}em; height: ${(2 * R + DOT).toFixed(2)}em; }
  .loader-swap__dot { position: absolute; left: 0; top: ${R}em; width: ${DOT}em; height: ${DOT}em; border-radius: 50%; background: var(--ink); animation: ${T.toFixed(2)}s linear infinite; }
  ${frames.map((f, i) => `.loader-swap__dot:nth-child(${i + 1}) { animation-name: loader-swap-dot-${i}; transform: translateX(${i * S}em); }\n  @keyframes loader-swap-dot-${i} {\n    ${f.join('\n    ')}\n  }`).join('\n  ')}
  @media (prefers-reduced-motion: reduce) {
    .loader-swap__dot { animation: none !important; }
  }
`;

export function Preview() {
  return (
    <>
      <style href="kit-loaders-swap" precedence="kit">
        {css}
      </style>
      <div className="loader-swap" role="status" aria-label="Loading">
        {[0, 1, 2].map((i) => (
          <span key={i} className="loader-swap__dot" aria-hidden="true" />
        ))}
      </div>
    </>
  );
}

Free to use in any project, commercial included. MIT-0, no attribution required. Licence

Install with shadcn

npx shadcn@latest add @movin/loader-swap
Source on GitHub

About this component

Three dots trade places in pairs, each pair circling round each other with one passing in front and one behind.

Dependencies
None
Difficulty
Intermediate
Triggers
continuous, loop, delay stagger
Techniques
keyframes, transform only
Reduced motion
Respected
Theme
Light and dark (follows your page's color-scheme)

The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the three dots rest in a row.

More loaders

See all
Tape Measure
Triad
Twist
Typewriter