Spinner

Implemented

Loading indicator — teal ring with rotating segment. Sizes: sm (16), md (24), lg (40). aria-label or aria-labelledby required when no visible label.

Categoryatoms

Sourcepatterns/atoms/spinner.html

AI HintIndeterminate activity indicator at sm/md/lg with an accessible label. Use for unquantifiable async waits; prefer Skeleton for content-shaped loading regions.

Animated loading indicator for indeterminate waits. FR-CA: Indicateur de chargement animé.

Spinner

Display atom (Family 2 — Tier 1)

Pair with role="status" + aria-live="polite".

ChargementChargementChargement

This component supports light and dark mode.

Usage

import { Spinner } from '@epasslive/design-system'

<div role="status" aria-live="polite">
  <Spinner size="md" label="Chargement des billets" />
</div>

When to use

Page-level loading (route transition, full refresh).
Unknown load time — pair with a Skeleton for shape + Spinner for motion.
Inline processing (form submit, search refresh).

Accessibility

Always pass a French label describing what is loading.
Wrap in role="status" + aria-live="polite" for politeness.

Props

Prop

Type

Default

Description

size

'sm' | 'md' | 'lg'

md

Pixel size — 16, 24, 40 respectively.

label

string

—

French description announced via aria-label.

className

string

—

Additional classes.

Props

Preview

Spinner

Prop

Type

Required

Default

Description

ariaLabel

string

Required

—

Required — Spinner conveys no information visually without context

size

"sm" | "md" | "lg"

Optional

'md'

Visual size preset.

decorative

boolean

Optional

false

Render as pure decoration — no role, no live region, aria-hidden. For when the surrounding component already announces the wait (LoadingOverlay). Prevents nesting two live regions, which is otherwise only avoidable by hand-copying the SVG.

label

string

Optional

—

Visible label for the control.

Quick use:<Spinner />

Accessibility

ARIA rolestatus

Usage

Import

tsxSnippet

import { Spinner } from "@epasslive/design-system"

Example 1

tsxSnippet

<Spinner />

Example 2

tsxSnippet

<Spinner variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms