Spinner

Spinner is a small spinning circle for short-lived loading states — a button mid-submit, an inline data fetch, a centered container loader. For longer loads where layout matters, use Skeleton.

Use it for

• Loading state inside a button while a form submits
• Inline indicator next to a label ("Loading…")
• Centered container loader for full-page or panel-level loading
• Any sub-second to few-second wait where Skeleton would be overkill

Import

import { Spinner } from '@brikdesigns/bds';

Variants

Two sizes — sm for inline, lg for container.

• sm — 16×16px. Inline use, button loading states.
• lg — 48×48px. Container loading, full-page loading.

Pattern: button loading

Most Buttons accept a loading prop directly — use that. Spinner is for cases where the loading indicator lives outside a Button.

<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
  <Spinner size="sm" />
  <span>Loading data…</span>
</div>

Pattern: container loading

<div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
  <Spinner size="lg" />
</div>

Custom colors

Spinner inherits theme color by default. To override (e.g. on a dark-brand background where the default would be invisible):

<Spinner
  size="sm"
  style={{
    borderColor: 'rgba(255,255,255,0.3)',
    borderTopColor: 'white',
  }}
/>

When not to use

• Don't use Spinner for loads over ~3 seconds. The user has no sense of progress. Use Skeleton (preserves layout) or a <ProgressBar> if you can estimate completion.
• Don't put Spinner in a button without loading. Use the Button's built-in loading prop — it handles disable, width preservation, and accessibility.

Accessibility

• Renders a <div> with role="status" and aria-label="Loading".
• Respects prefers-reduced-motion — pauses the rotation animation.

API

Plus all standard <div> HTML attributes.

Related

• Skeleton — layout-preserving loading
• Button — built-in loading prop
• Storybook playground