Skip to main content

LoadingIndicator

Imports

import {LoadingIndicator} from 'material-expressive-react';
import {LoadingIndicator} from 'material-expressive-react/progress';

Props

PropTypeDefaultRequiredDescription
containerColorstringNoOptional container/background color (contained only).
containerHeightstring | numberNoContainer height (CSS length). Default: 48px
containerWidthstring | numberNoContainer width (CSS length). Default: 48px
defaultVisiblebooleantrueNo
indicatorColorstringNoCSS color for the morphing indicator.
indicatorSizestring | numberNoSize of the animated shape (CSS length). Default: 38px
minHideDelaynumber0NoMinimum time (ms) to stay visible once shown.
onVisibleChange((visible: boolean) => void)No
showDelaynumber0NoDelay (ms) before showing when visible becomes true.
variantenumuncontainedNoContained draws a pill container behind the shape.
visiblebooleanNoControl visibility (useful for showDelay/minHideDelay).

Events

This component does not explicitly re-emit DOM events via wrapper props.

Slots

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples

See Storybook for live examples and variants.