Spinner

Loading indicator on [aria-busy] that inherits the current color — drops into buttons, badges and text. Pure CSS.

INSTALL

1pnpm dlx @sayagodev/mo add spinner

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/spinner.css";

EXAMPLES

Badge

Syncing Updating Processing

1<div class="hstack gap-4">2  <span class="badge">3    <span aria-busy="true" data-spinner="small"></span>4    Syncing5  </span>6  <span class="badge" data-variant="secondary">7    <span aria-busy="true" data-spinner="small"></span>8    Updating9  </span>10  <span class="badge outline">11    <span aria-busy="true" data-spinner="small"></span>12    Processing13  </span>14</div>15

Button

1<div class="vstack gap-4 items-center w-100">2  <button type="button" class="small" disabled>3    <span aria-busy="true" data-spinner="small"></span>4    Loading...5  </button>6  <button type="button" class="outline small" disabled>7    <span aria-busy="true" data-spinner="small"></span>8    Please wait9  </button>10  <button type="button" class="small" data-variant="secondary" disabled>11    <span aria-busy="true" data-spinner="small"></span>12    Processing13  </button>14</div>15

Size

1<div class="hstack gap-6">2  <span aria-busy="true" data-spinner="small" role="status" aria-label="Loading"></span>3  <span aria-busy="true" role="status" aria-label="Loading"></span>4  <span aria-busy="true" data-spinner="large" role="status" aria-label="Loading"></span>5</div>6

USAGE

1<span aria-busy="true"></span>2 3<button aria-busy="true">Saving…</button>

API

NAMEKINDDESCRIPTION

[aria-busy]attributeTurns any element into a busy/loading state; inline spinners inherit currentColor.

--mo-spinner-sizetokenDiameter of the spinner.

--mo-spinner-speedtokenRotation period.

FILES

src/css/spinner.css

Install:mo add spinner

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--muted--primary--radius

Preview

SyncingUpdating

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.