Loader
Interactive documentation for the loader component. Change props in the playground, inspect size and color variants, and copy generated examples.
Preview
Code
<Loader
color="midnight"
/>Sizes
All available loader sizes.
3xs
2xs
xs
s
m
l
xl
2xl
3xl
4xl
Colors
Available loader color variants.
midnight
basil
watermelon
cocaine
Usage examples
Common usage patterns for buttons, inline loading states, and full-page loaders.
Inline loading
Loading...
Button loading
Submitting
Page loading
Props
This table matches the current LoaderProps interface.
Loader
Animated circular loading indicator with configurable size and color.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| size | '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | 'm' | Optional | Controls loader width and height. |
| color | 'current' | 'midnight' | 'basil' | 'watermelon' | 'cocaine' | 'current' | Optional | Controls loader border color. |