Counter Preloader

---
/**
 * CounterPreloader — a count from 0 to 100 and a curtain that lifts, zero
 * JS. A fixed layer that never stands in the way: `pointer-events: none`
 * from the first frame, `aria-hidden`, and the page under it is rendered
 * and usable throughout. The number is one registered integer animated
 * 0 → 100 (literal keyframes) printed through `counter-set`; the bar reads
 * the same integer; then the layer translates off the top and ends
 * hidden. The whole thing lasts twice the slow token plus one duration —
 * about two seconds — and is not configurable longer: a preloader is a
 * promise, not a stage. `once` inlines 187 B that skip it for the rest of
 * the session (sessionStorage), before paint, on a full load and after
 * every ClientRouter swap (`data-astro-rerun`) — `transition:persist` was
 * tried and does not do it: the router moves the node into the new page
 * and a moved node restarts its CSS animations (measured, docs/phase-7e.md).
 * Under reduced motion, and in an engine without @property, it never shows.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Show once per session: an inline script, measured from its source string. */
  once?: boolean;
  /** Layer colour; default the ink token. */
  color?: string;
  /** Count colour; default the panel token. */
  textColor?: string;
  /** Element id and the once key. */
  id?: string;
}

const { once = false, color, textColor, id = 'ma-preloader', class: className, style, ...rest } = Astro.props;
const vars = [color && `--ma-preloader-bg:${color}`, textColor && `--ma-preloader-fg:${textColor}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
/** Runs where it is rendered, before the next paint: a session that has seen the layer removes it; the first sight is recorded. */
const ONCE = `(function(){var s=document.currentScript,l=s.previousElementSibling,K='ma-preloader:'+l.id;try{if(sessionStorage.getItem(K)){l.remove();return}sessionStorage.setItem(K,'1')}catch(e){}})()`;
---

<div class:list={['ma-preloader', className]} id={id} aria-hidden="true" style={vars || undefined} {...rest}>
  <span class="ma-preloader__bar"></span>
  <span class="ma-preloader__count"><span class="ma-preloader__n"></span><span class="ma-preloader__unit">%</span></span>
</div>
{once && <script is:inline data-astro-rerun set:html={ONCE} />}

<style is:global>
  @property --ma-preloader-n {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
  }
  /* the support probe: registered, never set — visible where @property exists, the fallback everywhere else */
  @property --ma-preloader-ok {
    syntax: 'visible';
    inherits: false;
    initial-value: visible;
  }
  @keyframes ma-preloader-count {
    from {
      --ma-preloader-n: 0;
    }
    to {
      --ma-preloader-n: 100;
    }
  }
  @keyframes ma-preloader-lift {
    to {
      translate: 0 -100%;
      visibility: hidden;
    }
  }
  @layer components {
    :where(.ma-preloader) {
      /* the count runs twice the slow token, then the lift takes one duration */
      --ma-preloader-count: calc(var(--ma-duration-slow) * 2);
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      align-content: end;
      padding: clamp(1rem, 4vw, 3rem);
      background: var(--ma-preloader-bg, var(--ma-ink));
      color: var(--ma-preloader-fg, var(--ma-panel));
      pointer-events: none;
      visibility: var(--ma-preloader-ok, hidden);
      animation:
        ma-preloader-count var(--ma-preloader-count) var(--ma-ease-out) forwards,
        ma-preloader-lift var(--ma-duration) var(--ma-ease-in-out) var(--ma-preloader-count) forwards;
    }
    :where(.ma-preloader__bar) {
      position: absolute;
      inset: auto 0 0 0;
      block-size: 3px;
      background: currentColor;
      transform-origin: 0 50%;
      scale: calc(var(--ma-preloader-n) / 100) 1;
      opacity: 0.6;
    }
    :where(.ma-preloader__count) {
      justify-self: end;
      font-size: clamp(3rem, 12vw, 9rem);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
    }
    :where(.ma-preloader__n) {
      counter-set: ma-preloader var(--ma-preloader-n);
    }
    :where(.ma-preloader__n)::before {
      content: counter(ma-preloader);
    }
    :where(.ma-preloader__unit) {
      font-size: 0.4em;
      vertical-align: 0.9em;
      opacity: var(--ma-dim, 0.7);
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-preloader) {
        visibility: hidden;
        animation: none;
      }
    }
  }
</style>