LoadingIndicator
Animated loading states
LoadingIndicator provides three animation variants (dots, pulse, spinner) in three sizes for showing loading states throughout your application.
Preview
Variants
dots
pulse
spinner
Sizes
sm
md
lg
Import
import
import { LoadingIndicator } from '@ash-cloud/ash-ui';Usage
LoadingState.tsx
import { LoadingIndicator } from '@ash-cloud/ash-ui';
function LoadingState() {
return (
<div className="flex flex-col items-center gap-4">
<LoadingIndicator variant="dots" size="md" />
<span className="text-sm text-white/60">Loading...</span>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'dots' | 'pulse' | 'spinner' | 'dots' | Animation style |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the indicator |
| className | string | undefined | Additional CSS classes |
Variants
dotsThree bouncing dots
pulsePulsing circle effect
spinnerRotating spinner icon
Common Use Cases
examples.tsx
// Button loading state
<button disabled={isLoading}>
{isLoading ? <LoadingIndicator variant="spinner" size="sm" /> : 'Submit'}
</button>
// Page loading
<div className="flex items-center justify-center h-screen">
<LoadingIndicator variant="dots" size="lg" />
</div>
// Inline loading
<span className="flex items-center gap-2">
<LoadingIndicator variant="pulse" size="sm" />
Processing...
</span>