Loading Indicator
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 preview…
1
'use client';2
3
import { LoadingIndicator } from 'sdaia-ui';4
5
export default function LoadingIndicatorRealWorld() {Installation
npx sdaia-ui@latest add loading-indicator
Usage
import { LoadingIndicator } from "@/components/ui/loading-indicator"<LoadingIndicator style="line-spinner" size="medium" />Examples
Line Simple
A simple animated line for indicating loading progress.
Loading preview…
1
<LoadingIndicator indicatorStyle="arc" size="md" />Line Spinner
A spinning line loader for open-ended loading states.
Loading preview…
1
<LoadingIndicator indicatorStyle="ring" size="md" />Radial Spinner
A circular radial spinner for loading states.
Loading preview…
1
<LoadingIndicator indicatorStyle="radial" size="md" />Sizes
Loading indicator in xSmall, Small, Medium, Large, and xLarge.
Loading preview…
1
<div className="flex flex-wrap items-end gap-spacing-lg">2
<LoadingIndicator indicatorStyle="arc" size="xs" />3
<LoadingIndicator indicatorStyle="arc" size="sm" />4
<LoadingIndicator indicatorStyle="arc" size="md" />5
<LoadingIndicator indicatorStyle="arc" size="lg" />Colors
Loading indicator in Neutral and Primary colour variants.
Loading preview…
1
<div className="flex flex-wrap items-end gap-spacing-lg">2
<LoadingIndicator indicatorStyle="ring" color="neutral" size="md" />3
<LoadingIndicator indicatorStyle="ring" color="primary" size="md" />4
</div>API Reference
LoadingIndicatorProps
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 |