A visual indicator for loading states. Available in three styles — Line Simple, Line Spinner, and Radial Spinner — five sizes, and Neutral or Primary colours.
Loading demo: loading-indicator-real-world
npx sdaia-ui@latest add loading-indicator
import { LoadingIndicator } from "@/components/ui/loading-indicator"<LoadingIndicator style="line-spinner" size="medium" />A simple animated line for indicating loading progress.
Loading demo: loading-indicator-line-simple
A spinning line loader for open-ended loading states.
Loading demo: loading-indicator-line-spinner
A circular radial spinner for loading states.
Loading demo: loading-indicator-radial-spinner
Loading indicator in xSmall, Small, Medium, Large, and xLarge.
Loading demo: loading-indicator-sizes
Loading indicator in Neutral and Primary colour variants.
Loading demo: loading-indicator-colors
Props for the LoadingIndicator component.
Prop | Type | Default | Required |
|---|---|---|---|
indicatorStyle | 'arc' | 'ring' | 'radial' | 'arc' | optional |
color | 'neutral' | 'primary' | 'neutral' | optional |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xs' | optional |
showLabel | boolean | true | optional |
supportingText | boolean | deprecated | optional |
label | ReactNode | 'Loading...' | optional |