Connect

No dependencies
Code format
React + Tailwind
const T = 3.2;
const GRID = [20, 50, 80];
// A spiral out from the centre that crosses every dot, each one 30 units on from the last.
const PATH = [
  [50, 50],
  [80, 50],
  [80, 80],
  [20, 80],
  [20, 20],
  [80, 20],
];
const START = 0.02;
const DRAW = 0.6; // the line is drawn by here
const HOLD = 0.74;
const GONE = 0.86;
const pct = (t: number) => `${(t * 100).toFixed(2)}%`;

const segs = PATH.slice(1).map((p, i) => ({ a: PATH[i], b: p, len: Math.hypot(p[0] - PATH[i][0], p[1] - PATH[i][1]) }));
const TOTAL = segs.reduce((s, g) => s + g.len, 0);
const when = (dist: number) => START + ((DRAW - START) * dist) / TOTAL;
// How far along the line each grid dot is reached.
function reach(x: number, y: number) {
  let run = 0;
  for (const { a, b, len } of segs) {
    const cross = (b[0] - a[0]) * (y - a[1]) - (b[1] - a[1]) * (x - a[0]);
    const along = ((x - a[0]) * (b[0] - a[0]) + (y - a[1]) * (b[1] - a[1])) / len;
    if (Math.abs(cross) < 1e-6 && along >= -1e-6 && along <= len + 1e-6) return run + along;
    run += len;
  }
  return TOTAL;
}
const DOTS = GRID.flatMap((y) => GRID.map((x) => ({ x, y, t: when(reach(x, y)) })));

const vertexTimes: number[] = [];
PATH.reduce((d, p, i) => {
  const next = i ? d + segs[i - 1].len : 0;
  vertexTimes.push(when(next));
  return next;
}, 0);
const touch = [
  `0% { transform: translate(${PATH[0][0]}px, ${PATH[0][1]}px); opacity: 0; }`,
  ...PATH.map((p, i) => `${pct(vertexTimes[i])} { transform: translate(${p[0]}px, ${p[1]}px); opacity: 1; }`),
  `${pct(DRAW + 0.04)} { transform: translate(${PATH.at(-1)![0]}px, ${PATH.at(-1)![1]}px); opacity: 0; }`,
  `100% { transform: translate(${PATH.at(-1)![0]}px, ${PATH.at(-1)![1]}px); opacity: 0; }`,
].join('\n    ');

const css = `
  .loader-connect { --ink: light-dark(#373a40, #f1f2f3); --dim: light-dark(#cbced3, #393c41); display: inline-block; font-size: 108px; width: 1em; height: 1em; }
  .loader-connect svg { display: block; width: 100%; height: 100%; }
  .loader-connect__line { fill: none; stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: ${TOTAL} ${TOTAL + 60}; stroke-dashoffset: ${TOTAL}; animation: loader-connect-draw ${T}s linear infinite; }
  .loader-connect__touch { fill: color-mix(in oklab, var(--ink) 18%, transparent); animation: loader-connect-touch ${T}s linear infinite; }
  .loader-connect__dot { fill: var(--dim); transform-box: fill-box; transform-origin: center; animation: ${T}s infinite; }
  @keyframes loader-connect-draw {
    0%, ${pct(START)} { stroke-dashoffset: ${TOTAL}; opacity: 1; }
    ${pct(DRAW)}, ${pct(HOLD)} { stroke-dashoffset: 0; opacity: 1; }
    ${pct(GONE)}, 100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes loader-connect-touch {
    ${touch}
  }
  ${DOTS.map(
    (d, i) => `.loader-connect__dot:nth-of-type(${i + 1}) { animation-name: loader-connect-dot-${i}; }
  @keyframes loader-connect-dot-${i} {
    0%, ${pct(d.t - 0.005)} { fill: var(--dim); scale: 1; }
    ${pct(d.t)} { fill: var(--ink); scale: 1.75; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
    ${pct(d.t + 0.07)}, ${pct(HOLD)} { fill: var(--ink); scale: 1.35; }
    ${pct(GONE)}, 100% { fill: var(--dim); scale: 1; }
  }`,
  ).join('\n  ')}
  @media (prefers-reduced-motion: reduce) {
    .loader-connect__line, .loader-connect__dot { animation: none !important; }
    .loader-connect__line { stroke-dashoffset: 0; }
    .loader-connect__dot { fill: var(--ink); scale: 1.35; }
    .loader-connect__touch { display: none; }
  }
`;

export function Preview() {
  return (
    <>
      <style href="kit-loaders-connect" precedence="kit">
        {css}
      </style>
      <div className="loader-connect" role="status" aria-label="Loading">
        <svg viewBox="0 0 100 100" aria-hidden="true">
          <path className="loader-connect__line" d={`M${PATH.map((p) => p.join(' ')).join(' L')}`} />
          {DOTS.map((d) => (
            <circle key={`${d.x}-${d.y}`} className="loader-connect__dot" cx={d.x} cy={d.y} r="4.5" />
          ))}
          <circle className="loader-connect__touch" cx="0" cy="0" r="10" />
        </svg>
      </div>
    </>
  );
}

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

Install with shadcn

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

About this component

A line traces a spiral through a three by three grid like an unlock pattern, lighting each dot it reaches, then fades out.

Dependencies
None
Difficulty
Intermediate
Triggers
continuous, loop, draw
Techniques
svg, stroke dashoffset, keyframes
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 whole pattern shows drawn with every dot lit.

More loaders

See all
Countdown
Elevator
Fan
Goo