Spinner
An indeterminate loading indicator for short waits whose length is unknown. It inherits currentColor, so it matches whatever text or button it sits in.
<Spinner />Import
import { Spinner } from "@merid/react";Examples
Sizes
Diameters of 14px (sm), 18px (md, default) and 24px (lg).
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />Next to text
When visible text already says what is loading, pass label={null} to hide the spinner from assistive tech so the message is not announced twice.
<Stack direction="row" gap={2} align="center">
<Spinner size="sm" label={null} />
<Text size="sm" as="span">Loading invoices…</Text>
</Stack>Colour
Set color on the spinner or a parent. Give it a specific label when it stands alone.
<span style={{ color: "var(--mrd-accent)" }}>
<Spinner size="lg" label="Uploading" />
</span>API reference
Renders a span; forwards its ref and passes native attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Diameter: sm 14px, md 18px, lg 24px. |
label | string | null | "Loading" | Accessible name. Pass null when decorative — the spinner is then aria-hidden. |
Styling
| Hook | Values |
|---|---|
.mrd-spinner | Root <span> |
.mrd-spinner__svg | The SVG |
.mrd-spinner__track | Faint full circle |
.mrd-spinner__arc | Rotating quarter arc |
data-size | sm · md · lg |
Component variable: --mrd-spinner-size, set per size.
.hero .mrd-spinner {
--mrd-spinner-size: 32px;
}Accessibility
- With a label, the spinner has
role="status"andaria-label, so screen readers announce it politely. - With
label={null}it isaria-hidden. Mark the region that is loading witharia-busy="true". - Under
prefers-reduced-motion, the rotation slows down rather than stopping, so progress stays visible.
Guidelines
Do
Use a spinner for waits under a few seconds. For longer or measurable work, show a Progress bar.
Avoid
Replace a whole page with a spinner when a Skeleton could show the shape of the content that is coming.