atom

Spinner

Loading indicator for communicating ongoing processes and async operations.

Overview

The Spinner component provides visual feedback during loading states. It indicates that content is being fetched or an operation is in progress, helping users understand that the system is working.

Props

Prop Type Default Description
size 'sm' | 'md' | 'lg' 'md' Size variant of the spinner
variant 'circular' | 'arc' 'circular' Visual style of the spinner
containerStyle BoxProps<Theme> undefined Custom styling for the spinner container
accessibilityLabel string undefined Screen-reader label describing what is loading
accessibilityRole AccessibilityRole undefined Accessibility role announced to screen readers.
accessibilityState AccessibilityState undefined Accessibility state object conveying current state to screen readers
testID string undefined Test ID for testing

Variants

Sizes

Three size options for different contexts.

Small
Medium
Large 
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Visual Variants

Two visual styles for the spinner animation.

Circular
Arc 
<Spinner variant="circular" />  {/* Dashed circle */}
<Spinner variant="arc" />       {/* Partial circle */}

Examples

Loading Button

Common pattern for buttons with loading state.

<Button disabled>
  <Spinner size="sm" />
  Loading...
</Button>

Centered Loading State

Full-area loading indicator.

Loading content...

Inline Loading

Spinner inline with text content.

Saving changes...

Accessibility

  • ARIA: Set accessibilityLabel="Loading" and accessibilityRole="progressbar" directly on the Spinner when it is the primary loading indicator.
  • Screen Readers: Provide loading text alongside the spinner when possible, or pass an accessibilityLabel describing what is loading.
  • Motion Sensitivity: Animation is smooth and not jarring.

Best Practices

  • Always provide context about what is loading when possible
  • Use appropriate size based on the area being loaded
  • Consider skeleton loaders for content-heavy areas
  • Show spinners only when loading takes more than 200ms