Feedback

Spinner

World-class loading indicators for async operations. Essential for providing clear feedback during patient data retrieval, insurance verification, and other critical healthcare processes.

Animation Styles

Choose the animation style that best fits your use case. Ring is professional and familiar, dots are friendly and modern, pulse is calm and non-intrusive.

Ring

Default, professional

Dots

Modern, friendly

Pulse

Calm, non-intrusive

Sizes

Choose size based on the context and importance of the loading operation. Use larger sizes for full-page or section loading, smaller sizes for inline indicators.

XS (16px)

SM (20px)

MD (28px)

LG (40px)

XL (56px)

Color Variants

Use appropriate colors based on context. Primary for general loading, success/error for status-specific operations.

Primary

Secondary

Success

Error

White

With Label

Always provide context-specific labels for screen reader users and to inform users about what's being processed.

Overlay Mode

Use overlay mode to block interactions while loading. The spinner appears centered over its parent container with a semi-transparent backdrop.

Patient Summary

Loading patient demographics, medical history, and recent visits...

Click to see the overlay in action (2 second demo)

Delayed Display

Use delay to prevent the spinner from flashing on fast operations. The spinner only appears if the operation takes longer than the delay threshold.

Set delay=100 or higher to prevent flash on fast operations. Recommended: 100-200ms for most use cases.

Healthcare Context Examples

Common patterns for using spinners in healthcare applications.

Loading Patient Chart

Verifying Coverage

Syncing Records

Checking for drug interactions...

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	'md'	Spinner size
`variant`	`'primary' \| 'secondary' \| 'white' \| 'success' \| 'error'`	'primary'	Color variant
`style`	`'ring' \| 'dots' \| 'pulse'`	'ring'	Animation style
`label`	`string`	'Loading...'	Screen reader announcement
`showLabel`	`boolean`	false	Shows label visually
`delay`	`number`	0	Delay in ms before showing (prevents flash on fast loads)
`overlay`	`boolean`	false	Show as overlay covering parent container

Healthcare Best Practices

Meaningful Labels: Always provide context-specific label text (e.g., "Loading patient records" not just "Loading").
Delay for Fast Operations: Use delay=100 to prevent spinner flash on quick API calls.
Progress When Possible: For operations over 3 seconds, consider using a ProgressBar instead to show determinate progress.
Overlay for Critical Sections: Use overlay mode when users should not interact with content during loading.
Reduced Motion Support: The component respects prefers-reduced-motion for users sensitive to animations.

Accessibility Notes

ARIA Status: Uses role="status" with aria-live="polite" for screen reader announcements.
Busy State: Includes aria-busy="true" to indicate ongoing loading.
Hidden Visuals: Animation elements use aria-hidden="true" to prevent screen reader noise.
Reduced Motion: Static alternatives are shown for users with motion sensitivity.