RootUI
Loader

Loader

Component that displays an indeterminate loading state.

Loading...
<Loader />

Props

Component inherits all props from the div element including the following custom props:

size

size?: "xs" | "sm" | "md" | "lg";

Size of the loader. Defaults to md.

Loading...
Loading...
Loading...
Loading...
<Loader size="xs" />
<Loader size="sm" />
<Loader size="md" />
<Loader size="lg" />

intent

intent?:
 | "primary"
 | "primaryReverse"
 | "grey"
 | "greyReverse"
 | "onColor";

Color of the loader. Defaults to primary.

Color intent is purposefully built to work in a variety of situations.

primary and grey handle both light and dark backgrounds:

Loading...
Loading...
<Loader intent="primary" />
<Loader intent="grey" />

primaryReverse and greyReverse are the same as primary and grey but with the theming reversed:

Loading...
Loading...
<Loader intent="primaryReverse" />
<Loader intent="greyReverse" />

onColor is the same regardless of the theme - meant to be used on top of elements with heavily saturated colors:

Loading...
<Loader intent="onColor" />