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 of the spinner
variant 'circular' | 'arc' 'circular' Visual style of the spinner
className string - Additional CSS class names

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: Consider adding aria-label="Loading" and role="status" to containers.
  • Screen Readers: Provide loading text alongside the spinner when possible.
  • 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