i

Spinner

Showing state and identity · researched

An animated indicator that content or an action is loading.

atom · Carbon: Loading · also called Loading, Spin

"Loading" names a state; "Spinner" names the thing.

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Spin native: no antd 6.6.5
Variants
—
Sizes
small, medium, large
States documented
loading
Accessibility guidance
no

Div container with aria-live=polite and aria-busy; can wrap content as an overlay. size 'default' is deprecated in favour of 'medium'.

docs ↗ · code ↗

Carbon

Loading native: no @carbon/react 1.117.0
Variants
withOverlay
Sizes
large, small
States documented
loading
Accessibility guidance
yes

Div wrapper with svg circles, role=img and aria-live. Variant names are boolean props, not docs-named variants. InlineLoading (statuses inactive, active, finished, error) is a separate sibling documented on its own page.

3 corrected on re-read
  • variants: ["small","withOverlay"] → ["withOverlay"] Source boolean prop withOverlay; docs name no variants (small is a size)
  • sizes: null → ["large","small"] Loading usage/style: two sizes, large (default) and small
  • urls: {"docs_url":"https://carbondesignsystem.com/components/loading/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Loading"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/loading/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Loading"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/loading/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No spinner or loading indicator. Button page only advises showing a loading spinner or modal before using data-prevent-double-click.

Material Web

Circular progress, indeterminate (<md-circular-progress indeterminate>) variant native: no @material/web 2.5.0
Variants
determinate, indeterminate, four-color
Sizes
—
States documented
—
Accessibility guidance
yes

Index missed it. Indeterminate circular progress is Material's spinner: divs and svg with role=progressbar, not the native progress element. Accessibility section says to add an aria-label.

docs ↗ · code ↗

Primer

Spinner native: no @primer/react 38.40.1
Variants
—
Sizes
small, medium, large
States documented
—
Accessibility guidance
yes

Primer React. Renders a span containing an svg; status ready.

docs ↗ · code ↗

Spectrum

Progress circle (indeterminate) variant native: no @spectrum-web-components/button 1.12.4
Variants
over background
Sizes
S, M, L
States documented
default
Accessibility guidance
no

Index disagreement: it said Spectrum does not ship this and mapped PixelLoader (an experimental AI loader in S2 and SWC gen2). The rsp page documents indeterminate use via isIndeterminate for unknown-duration waits, so the spinner job is Progress circle's indeterminate mode (S2, v3, SWC 1st-gen sp-progress-circle, gen2, spectrum-css). Installed SWC 1.12.4 has progress-circle (not PixelLoader).

2 corrected on re-read
  • variants: null → ["over background"] Page documents the over background variant (static white); S2 staticColor black|white|auto
  • a11y_documented: "yes" → "no" rsp accessibility fragment is the Button keyboard table (identical to rsp button fragment), not about this component

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Index mapped the status-page row Spinner. The component status page lists it only as Discussion started (proposal phase): no docs page and no package exist (checked the docs index and the develop packages/ tree). Not shipped.

Platform facts

Native elementprogress (indeterminate)No spinner element or APG pattern. Spec: progress 'is either indeterminate ... or a number in the range zero to a maximum'; MDN: no value attribute means indeterminate; give it an accessible label with aria-labelledby/aria-label (text inside the tags is not a label). Whether a spinner should be a progress element is the author's choice; no source says so.
Baseline—
APG patternnone
ARIA role—
Shipped by5 of 7 systems

Anatomy

    The seven states

    default Animating.
    hover n/a — Not interactive.
    focus n/a — Not focusable.
    active n/a — Not interactive.
    disabled n/a — Not defined by APG or HTML.
    error n/a — Not defined by APG or HTML.
    loading It is the loading indicator itself.

    Every cell was read twice, the second time from raw sources by a separate pass. 5 of 35 fields changed on the second read — open any “corrected” note to see what it said before.