Stamp

No dependencies
Code format
React + Tailwind
import type { CSSProperties } from 'react';

const T = 3.9;
// Where each impression lands on the sheet: centre and angle.
const SPOTS = [
  { x: 96, y: 62, r: -9 },
  { x: 138, y: 104, r: 6 },
  { x: 100, y: 142, r: -4 },
];
const LIFT = 'scale(1.16)';
const pose = (k: number, s: string) => `translate(${SPOTS[k].x - 62}px, ${SPOTS[k].y - 23}px) rotate(${SPOTS[k].r}deg) ${s}`;
const UP = 'box-shadow: 0 22px 24px -6px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.3))';
const DOWN = 'box-shadow: 0 2px 3px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.35))';
const pct = (f: number) => `${(f * 100).toFixed(2)}%`;
// The stamp: hover over a spot, press, hold, lift, glide to the next spot.
const tool = SPOTS.flatMap((_, k) => {
  const b = k / 3;
  const next = (k + 1) % 3;
  return [
    `${pct(b)} { transform: ${pose(k, LIFT)}; ${UP}; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); }`,
    `${pct(b + 0.075)} { transform: ${pose(k, 'scale(1)')}; ${DOWN}; }`,
    `${pct(b + 0.115)} { transform: ${pose(k, 'scale(0.985)')}; ${DOWN}; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }`,
    `${pct(b + 0.18)} { transform: ${pose(k, LIFT)}; ${UP}; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }`,
    ...(k === 2 ? [`100% { transform: ${pose(next, LIFT)}; ${UP}; }`] : []),
  ];
}).join(' ');

const css = `
  .loader-stamp { --paper: light-dark(#fbfcfd, #e5e6e9); --ink: light-dark(#373a40, #121417); --rule: color-mix(in oklab, var(--paper) 86%, var(--ink)); --wood: light-dark(#5f626a, #7d8087); position: relative; width: 230px; height: 184px; }
  /* A sheet of paperwork to stamp. */
  .loader-stamp__sheet { position: absolute; left: 20px; top: 10px; width: 190px; height: 164px; border-radius: 2px; background: linear-gradient(var(--rule), var(--rule)) 18px 22px / 74px 5px no-repeat, repeating-linear-gradient(transparent 0 13px, var(--rule) 13px 15px) 18px 40px / 154px 106px no-repeat, var(--paper); box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2)), 0 12px 20px -8px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)); rotate: -2deg; }
  /* An impression: double rule and heavy condensed capitals, with the speckle of a real inking. */
  .loader-stamp__mark { position: absolute; left: 0; top: 0; box-sizing: border-box; display: grid; place-items: center; width: 124px; height: 46px; border: 4px double var(--ink); border-radius: 5px; color: var(--ink); font: 400 25px/1 Impact, Haettenschweiler, 'Arial Narrow Bold', 'Franklin Gothic Condensed', sans-serif; letter-spacing: 0.1em; text-indent: 0.1em; opacity: 0; -webkit-mask: radial-gradient(circle, #000 0.7px, transparent 1.2px) 0 0 / 6px 5px, radial-gradient(circle, #000 0.5px, transparent 1px) 3px 2px / 9px 7px, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask: radial-gradient(circle, #000 0.7px, transparent 1.2px) 0 0 / 6px 5px, radial-gradient(circle, #000 0.5px, transparent 1px) 3px 2px / 9px 7px, linear-gradient(#000, #000); mask-composite: exclude; animation: loader-stamp-ink ${T}s linear infinite; }
  /* The stamp from above: a wooden block, its rubber just showing at the edge, a turned knob on top. */
  .loader-stamp__tool { position: absolute; left: 0; top: 0; width: 124px; height: 46px; border-radius: 7px; background: radial-gradient(circle at 50% 46%, light-dark(#dbdde1, #e5e6e9) 0 9px, light-dark(#50535b, #7d8087) 12px 15px, transparent 15.5px), linear-gradient(170deg, color-mix(in oklab, var(--wood) 70%, light-dark(#fbfcfd, #121417)), var(--wood) 40%, color-mix(in oklab, var(--wood) 80%, light-dark(#373a40, #f1f2f3))); outline: 2.5px solid light-dark(#373a40, #121417); outline-offset: -1px; transform-origin: 62px 23px; animation: loader-stamp-press ${T}s infinite; }
  .loader-stamp__tool::after { content: 'LOADING'; position: absolute; left: 8px; top: 15px; color: color-mix(in oklab, var(--wood) 45%, light-dark(#fbfcfd, #121417)); font: 400 10px/1 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: 0.08em; }
  @keyframes loader-stamp-press { ${tool} }
  @keyframes loader-stamp-ink { 0% { opacity: 0.92; } 32% { opacity: 0.6; } 64% { opacity: 0.3; } 95%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .loader-stamp__mark { animation: none; opacity: 0.9; }
    .loader-stamp__mark:not(:first-of-type) { opacity: 0.35; }
    .loader-stamp__tool { animation: none; transform: ${pose(1, LIFT)}; ${UP}; }
  }
`;

export function Preview() {
  return (
    <>
      <style href="kit-loaders-stamp" precedence="kit">
        {css}
      </style>
      <div className="loader-stamp" role="status" aria-label="Loading">
        <span className="loader-stamp__sheet" aria-hidden="true" />
        {SPOTS.map((s, k) => (
          <span
            key={k}
            className="loader-stamp__mark"
            aria-hidden="true"
            style={{ transform: `translate(${s.x - 62}px, ${s.y - 23}px) rotate(${s.r}deg)`, animationDelay: `${((k / 3 + 0.075) * T - T).toFixed(3)}s` } as CSSProperties}
          >
            LOADING
          </span>
        ))}
        <span className="loader-stamp__tool" 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-stamp
Source on GitHub

About this component

A rubber stamp seen from above presses LOADING onto a sheet at a new angle each time, while the older impressions fade.

Dependencies
None
Difficulty
Intermediate
Triggers
continuous, loop, keyframe
Techniques
keyframes, radial gradient, 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 stamp hangs lifted over a fresh impression with two faded ones beside it.

More loaders

See all
Stretch
Swap
Tape Measure
Triad