Loader
A animated loading component for indicating ongoing processes and loading states with various sizes and styles.
Source
LLM docs
Package
Examples
5
Properties
33
Playground
Basics
Pick a loader
variant to match the type of busy indicator you need for a loading state.Loading demo…
import { Loader, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="lg" align="center">
<Loader variant="oval" />
<Loader variant="bars" />
<Loader variant="dots" />
</Row>
);
}Sizes
Set the
size token to align loaders with other controls, from xs indicators up to 3xl spinners.Loading demo…
import { Block, Loader, Row, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Row align="center" gap="lg" wrap="wrap">
{SIZES.map((size) => (
<Block key={size} align="center">
<Loader size={size} />
<Text variant="small">{size}</Text>
</Block>
))}
</Row>
);
}Variants
Compare the oval, bars, and dots loading animations.
Loading demo…
import { Column, Loader, Row, Text } from '@plocks/ui';
const variants = ['oval', 'bars', 'dots'] as const;
export function Demo() {
return (
<Row gap="xl" align="center" wrap="wrap">
{variants.map(variant => (
<Column key={variant} gap="xs" align="center">
<Loader variant={variant} />
<Text size="sm">{variant}</Text>
</Column>
))}
</Row>
);
}Colors
Pull palette values from
useTheme() and pass them to the color prop to align loaders with your semantic colors.Loading demo…
import { Block, Loader, Row, Text, useTheme } from '@plocks/ui';
interface LoaderSwatch {
label: string;
color: string;
}
export function Demo() {
const theme = useTheme();
const swatches: LoaderSwatch[] = [
{ label: 'Primary', color: theme.colors.primary[5] },
{ label: 'Success', color: theme.colors.success[5] },
{ label: 'Warning', color: theme.colors.warning[5] },
{ label: 'Error', color: theme.colors.error[5] }
];
return (
<Block>
{swatches.map(({ label, color }) => (
<Row key={label} gap="md" align="center">
<Block miw={88}>
<Text variant="small" c="muted">
{label}
</Text>
</Block>
<Loader variant="oval" color={color} />
<Loader variant="bars" color={color} />
<Loader variant="dots" color={color} />
</Row>
))}
</Block>
);
}Speed
Loading demo…
import { Block, Loader, Row, Text } from '@plocks/ui';
// `speed` is the duration of one full animation cycle in milliseconds —
// lower is faster. Default is 1000ms.
const SPEEDS = [
{ label: 'Fast', value: 400 },
{ label: 'Default', value: 1000 },
{ label: 'Slow', value: 2000 },
];
export function Demo() {
return (
<Block>
{SPEEDS.map(({ label, value }) => (
<Row key={value} gap="lg" align="center">
<Block miw={96}>
<Text variant="small" fw="semibold">
{label}
</Text>
<Text variant="small" c="muted">
{value}ms
</Text>
</Block>
<Loader variant="oval" size="lg" speed={value} />
<Loader variant="bars" size="lg" speed={value} />
<Loader variant="dots" size="lg" speed={value} />
</Row>
))}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources