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

Size

Size controls loader height, width is calculated dynamically. Loader has predefined sizes: xs, sm, md, lg, xl. Alternatively you can use number to set height in px:

<Loader size="sm" /> // -> predefined small size
<Loader size={50} /> // -> { height: 50 }

You can get predefined sizes by importing LOADER_SIZES:

import { LOADER_SIZES } from '@mantine/core';
SizeHeight
xs18px
sm22px
md36px
lg44px
xl58px