Loader

Usage

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

<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';