Design System/Atoms/Spinner

Spinner

Animated loading indicator for async operations and pending states.

When To Use

  • Use Spinner when information needs to be scanned quickly and compared across multiple rows, cards, or values.
  • Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
  • Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

  • Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
  • Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

  • Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
  • Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
  • Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Variant props

size

Key exports

Spinner, spinnerVariants

Example Code

import { Spinner } from "@hilum/ui"

<div className="flex items-center gap-4">
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner />
  <Spinner size="lg" />
  <Spinner size="xl" />
</div>

Spinner

Sizes

xs · sm · default · lg · xl

Colors

Control color with text-* classes

In a button

Loading state with spinner and text

As page loader

Centered spinner with label

Loading data...