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
Variant
<Loader />

Configure default loader

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

// Loader component will render bars
<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

You can get predefined sizes by importing LOADER_SIZES:

import { LOADER_SIZES } from '@mantine/core';
SizeHeight or width
xs18px
sm22px
md36px
lg44px
xl58px
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback