Primitive / Atombeta

Spinner

Accessible loading indicator with a reduced-motion pulsing ring fallback.

Edit on GitHub

pnpm dlx @glinui/cli@latest add spinner

Loading your dashboard

Fetching the latest numbers

Installation

Install from

pnpm dlx @glinui/cli@latest add spinner

Prefer the package?

Usage

Variants

import { Spinner } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Spinner variant="glinr" label="glinr" />
      <Spinner variant="solid" label="solid" />
      <Spinner variant="plain" label="plain" />
      <Spinner variant="soft" label="soft" />
      <Spinner variant="outline" label="outline" />
      <Spinner variant="ghost" label="ghost" />
      <Spinner variant="muted" label="muted" />
    </div>
  )
}

Sizes

Four sizes and a muted look for quiet surfaces.

muted

import { Spinner } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex flex-wrap items-end gap-8">
      {(["sm", "md", "lg", "xl"] as const).map((size) => (
        <div key={size} className="flex flex-col items-center gap-2">
          <Spinner size={size} label={`Loading ${size}`} />
          <span className="font-mono text-xs text-[var(--color-muted)]">{size}</span>
        </div>
      ))}
      <div className="flex flex-col items-center gap-2">
        <Spinner size="lg" variant="muted" label="Loading muted" />
        <span className="font-mono text-xs text-[var(--color-muted)]">muted</span>
      </div>
    </div>
  )
}

Accessibility

Renders `role="status"` with an `aria-label`, announcing politely to assistive tech.
Visual shapes are `aria-hidden`; do not rely on them for meaning.

ARIA Attributes

`role="status"`
`aria-label` (defaults to `Loading`)

Reduced Motion

Rotation is replaced by a ring of dots that pulses in opacity.

Affected properties

transform (rotate)opacity

API Reference

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	No	`md`	Diameter of the indicator.
`variant`	`ControlVariantProp \| "muted" \| "current"`	No	`ambient (glinr)`	Color treatment. Omit to follow the ambient design style (glinr = accent, minimal = foreground). `current` inherits text color. Glass renders a chip and is opt-in.
`label`	`string`	No	`Loading`	Accessible name announced to screen readers.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Spinner } from "@glinui/ui"

Source Files

spinner.tsx

spinner.test.tsxtest

Dependencies

@glinui/uiclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/spinner.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

SpinnerProps

`SpinnerProps`

Prop	Type	Required	Default	Description
`label`	`string`	No	`"Loading"`	Accessible label announced to assistive tech.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	No	`"md"`	Variant option from spinnerVariants.
`variant`	`ControlVariantProp \| "muted" \| "current"`	No	`-`	Color treatment. Omit to follow the ambient design style (glinr = accent, minimal = foreground). Also: solid, soft, outline, ghost, glass (chip, opt-in), muted, current.