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