Spinner `.mv-spinner`

一组以 currentColor 绘制的单元素加载指示器：圆环、拖尾弧、波浪圆点、均衡器条、轨道和脉冲；5 种尺寸。

分类	反馈
类型	纯 CSS（`.mv-spinner`）
状态	稳定版
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
An AI assistant is generating a reply and needs a branded thinking indicator with a label → use Pixel Loader instead

安装

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

使用 Marvelous UI MCP 服务器的 AI 智能体：install_components({ slugs: ["spinner"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

复制的文件（含依赖）：tokens/tokens.css、core/base.css、components/spinner/spinner.css。

用法

标准标记，可在此基础上通过属性、data-* 和 CSS 变量进行定制：

<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	类型	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.