Loading

An animated SVG spinner injected via CSS whenever aria-busy is set.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/loading.css" />

Button

Loading

<button aria-busy>Saving…</button>

Custom element

Any element with aria-busy gets a spinner via ::before.

<div style="width: 1lh" aria-busy></div>

Loading card

Center a spinner in a .card for a panel that blocks the view while something loads.

Processing your request

Please wait while we process your request. Do not refresh the page.

<article class="card empty">
  <span
    aria-busy
    style="
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 8px;
      background: var(--ui-neutral-100);
      display: grid;
      place-items: center;
    "
  ></span>
  <h4>Processing your request</h4>
  <p>Please wait while we process your request. Do not refresh the page.</p>
  <button class="outlined">Cancel</button>
</article>