LoadingIndicator displays an animated spinner to signal that content is loading or an operation is in progress. It provides visual feedback during asynchronous operations, helping users understand that the system is working. Built on Radix UI's Spinner component, it offers consistent loading states across the interface with multiple size variants.
Props
Name
Default
Description
size
LoadingIndicatorSize.Regular
Size variant. Options: Small, Regular, Large.
loading
Whether the loading indicator is visible. Note: This prop is currently not implemented in the component.
children
Optional content to display alongside the loading indicator. Note: Radix UI's Spinner component may not render children.
Small
Use in tight spaces or when the loading indicator supplements other content.
Regular
Default size for most loading scenarios, balancing visibility and space efficiency.
Large
Use for prominent loading states, such as full-page or major content area loading.
In Loading States
Use loading indicators to provide feedback during data fetching or processing.
Page Loading
Display a centered loading indicator when loading full pages or major sections.
Inline Loading
Show a small loading indicator inline with text or other content.
Table Loading
Use loading indicators in table cells or empty states when data is loading.
Conditional Rendering
Control the visibility of loading indicators based on application state.
With Processing Messages
Combine loading indicators with contextual messages to inform users about what's happening.
Size Comparison
Compare different sizes side by side to choose the appropriate variant.