Loader

Usage

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

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