Spinner — `.mv-spinner`

A family of single-element loading indicators drawn in currentColor: ring, trailing arc, wave dots, equalizer bars, orbit and pulse; 5 sizes.

Category	Feedback
Type	CSS only (`.mv-spinner`)
Status	stable
Keywords	spinner, loader, loading, chargement, dots, bars, orbit, pulse, ring

When to use

A button or inline area waits on a short action of unknown duration, such as saving or submitting
A small, neutral loading cue must inherit the surrounding text color at any size

Avoid when

The loading content has a known layout that placeholders could preview → use Skeleton instead
The completion percentage is known and should be shown → use Progress instead

Install

node scripts/add.mjs spinner --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["spinner"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/spinner/spinner.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:grid;gap:2rem;justify-items:center;width:100%">
  <!-- Variants -->
  <div style="display:flex;flex-wrap:wrap;justify-content:center;gap:1rem">
    <figure style="margin:0;display:grid;justify-items:center;gap:.75rem;width:6.5rem;padding:1.25rem .5rem 1rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface)">
      <span class="mv-spinner" data-size="lg" role="status"><span class="mv-sr-only">Loading…</span></span>
      <figcaption style="font-size:.75rem;color:var(--mv-fg-muted)">ring</figcaption>
    </figure>
    <figure style="margin:0;display:grid;justify-items:center;gap:.75rem;width:6.5rem;padding:1.25rem .5rem 1rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface)">
      <span class="mv-spinner" data-variant="arc" data-size="lg" role="status"><span class="mv-sr-only">Loading…</span></span>
      <figcaption style="font-size:.75rem;color:var(--mv-fg-muted)">arc</figcaption>
    </figure>
    <figure style="margin:0;display:grid;justify-items:center;gap:.75rem;width:6.5rem;padding:1.25rem .5rem 1rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface)">
      <span class="mv-spinner" data-variant="dots" data-size="lg" role="status"><span class="mv-sr-only">Loading…</span></span>
      <figcaption style="font-size:.75rem;color:var(--mv-fg-muted)">dots</figcaption>
    </figure>
    <figure style="margin:0;display:grid;justify-items:center;gap:.75rem;width:6.5rem;padding:1.25rem .5rem 1rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface)">
      <span class="mv-spinner" data-variant="bars" data-size="lg" role="status"><span class="mv-sr-only">Loading…</span></span>
      <figcaption style="font-size:.75rem;color:var(--mv-fg-muted)">bars</figcaption>
    </figure>
    <figure style="margin:0;display:grid;justify-items:center;gap:.75rem;width:6.5rem;padding:1.25rem .5rem 1rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface)">
      <span class="mv-spinner" data-variant="orbit" data-size="lg" role="status"><span class="mv-sr-only">Loading…</span></span>
      <figcaption style="font-size:.75rem;color:var(--mv-fg-muted)">orbit</figcaption>
    </figure>
    <figure style="margin:0;display:grid;justify-items:center;gap:.75rem;width:6.5rem;padding:1.25rem .5rem 1rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface)">
      <span class="mv-spinner" data-variant="pulse" data-size="lg" role="status"><span class="mv-sr-only">Loading…</span></span>
      <figcaption style="font-size:.75rem;color:var(--mv-fg-muted)">pulse</figcaption>
    </figure>
  </div>

  <!-- Sizes + colors (inherit currentColor) -->
  <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem;color:var(--mv-accent)">
    <span class="mv-spinner" data-size="xs" role="status"><span class="mv-sr-only">Loading…</span></span>
    <span class="mv-spinner" data-size="sm" role="status"><span class="mv-sr-only">Loading…</span></span>
    <span class="mv-spinner" role="status"><span class="mv-sr-only">Loading…</span></span>
    <span class="mv-spinner" data-size="lg" role="status"><span class="mv-sr-only">Loading…</span></span>
    <span class="mv-spinner" data-size="xl" data-variant="arc" role="status"><span class="mv-sr-only">Loading…</span></span>
    <span class="mv-spinner" data-size="xl" data-variant="bars" role="status" style="color:var(--mv-success)"><span class="mv-sr-only">Now playing</span></span>
  </div>

  <!-- In context -->
  <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem">
    <button class="mv-button" disabled style="opacity:1">
      <span class="mv-spinner" data-size="sm" aria-hidden="true"></span>
      Saving…
    </button>
    <button class="mv-button" data-variant="outline" disabled style="opacity:1">
      <span class="mv-spinner" data-variant="dots" data-size="sm" aria-hidden="true"></span>
      Generating
    </button>
    <span class="mv-spinner-label" role="status">
      <span class="mv-spinner" data-variant="arc" data-size="sm" aria-hidden="true"></span>
      Syncing 3 files…
    </span>
  </div>
</div>

API

Attributes

Name	Type	Default	Description
`data-variant`	ring \| arc \| dots \| bars \| orbit \| pulse	`ring`	Animation shape.
`data-size`	xs \| sm \| lg \| xl	`(1.25rem)`	Size: 0.875, 1, 1.25, 2 or 3 rem.

CSS classes

Name	Description
`mv-spinner`	On a `<span role="status">` containing a .mv-sr-only label (or aria-hidden="true" when paired with visible text).
`mv-spinner-label`	Spinner + visible text row (put role="status" on this container).

CSS variables

Name	Default	Description
`--mv-spinner-size`	`1.25rem`	Custom size (overrides data-size).
`--mv-spinner-color`	`currentColor`	Color (inherits the text color by default).
`--mv-spinner-speed`	`1`	Speed multiplier (2 = twice as fast).

Accessibility

role="status" + a .mv-sr-only label (“Loading…”) for a polite announcement; inside a button or next to visible text, set aria-hidden="true" on the spinner and let the text carry the information. Reduced motion: animations stop, the static shape stays visible.