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' }}>
<YourApp />
</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 or height in px:

<Loader size="sm" /> // -> predefined small size
<Loader size={50} /> // -> size in px