import { Loader } from 'reshaped';
function Example() {
return <Loader size="medium" color="primary" ariaLabel="Loading content" />;
}
size
string | Responsive<string>
Size of the loader.Options: "small", "medium", "large"<Loader size="medium" />
<Loader size={{ s: 'small', m: 'large' }} />
Color based on theme color tokens.Options: "primary", "critical", "positive", "inherit"
Accessible label for screen readers. Always provide a descriptive label.<Loader ariaLabel="Loading your dashboard" />
Additional CSS class for the root element.
Additional HTML attributes for the root element.
Examples
<View gap={4} align="center" direction="row">
<Loader size="small" ariaLabel="Loading" />
<Loader size="medium" ariaLabel="Loading" />
<Loader size="large" ariaLabel="Loading" />
</View>
<View gap={4} align="center" direction="row">
<Loader color="primary" ariaLabel="Loading" />
<Loader color="critical" ariaLabel="Loading" />
<Loader color="positive" ariaLabel="Loading" />
<Loader color="inherit" ariaLabel="Loading" />
</View>
Responsive Size
// Small on mobile, large on desktop
<Loader
size={{ s: 'small', m: 'large' }}
ariaLabel="Loading content"
/>
In Buttons
<Button disabled>
<View gap={2} align="center" direction="row">
<Loader size="small" color="inherit" ariaLabel="Loading" />
<span>Loading...</span>
</View>
</Button>
Centered Loading State
<View height="400px" align="center" justify="center">
<Loader size="large" color="primary" ariaLabel="Loading page content" />
</View>
Overlay Loading
function LoadingOverlay({ children, loading }) {
return (
<View position="relative">
{children}
{loading && (
<View
position="absolute"
inset={0}
align="center"
justify="center"
backgroundColor="neutral-faded"
>
<Loader
size="large"
color="primary"
ariaLabel="Processing request"
/>
</View>
)}
</View>
);
}
Accessibility
- Always provide an
ariaLabel that describes what is loading
- Use semantic HTML for loading states (
role="status" is applied automatically)
- Consider using
aria-live="polite" regions for dynamic loading states
- Ensure adequate color contrast with the background