Loader Component
A versatile loading component with multiple variants and sizes.
Basic Usage
import { Loader } from 'uiplex';
<Loader />Variants
Spinner (Default)
<Loader variant="spinner" />Dots
<Loader variant="dots" />Pulse
<Loader variant="pulse" />Sizes
Extra Small
<Loader size="xs" />Small
<Loader size="sm" />Medium (Default)
<Loader size="md" />Large
<Loader size="lg" />Custom Dimensions
<Loader width={60} height={60} />Centered Loader
This content has a centered loader overlay
<div style={{ position: 'relative', height: '200px' }}>
<div>Your content here</div>
<Loader isCentered />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | - | Custom width in pixels (overrides size) |
| height | number | - | Custom height in pixels (overrides size) |
| isCentered | boolean | false | Whether to center the loader with absolute positioning |
| className | string | "" | Additional CSS classes |
| size | "xs" | "sm" | "md" | "lg" | "md" | Predefined size variants |
| variant | "spinner" | "dots" | "pulse" | "spinner" | Visual style variant |