Loader

Indicate loading state
Import

Usage

By default, loader will be rendered with theme.primaryColor. You can choose any color defined in theme.colors:

Color
Size
xs
sm
md
lg
xl
Variant
import { Loader } from '@mantine/core';
function Demo() {
return <Loader />;
}

Configure default loader

You can configure default loader in MantineProvider, it will be used in Loader and LoadingOverlay components by default:

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider theme={{ loader: 'bars' }}>
<App />
</MantineProvider>
);
}

Size

Size controls loader height or width (depends on loader variant). Loader has predefined sizes: xs, sm, md, lg, xl. Alternatively, you can use a number to set width and height:

<Loader size="sm" /> // -> predefined small size
<Loader size={48} /> // -> size in rem -> 48 -> 3rem

Loader component props

NameTypeDescription
color
MantineColor
Loader color from theme
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Defines width of loader
variant
"bars" | "oval" | "dots"
Loader appearance