LoadingIndicator

LoadingIndicator shows progress for a short indeterminate wait using a morphing active indicator.

The active indicator morphs between Material shape paths. See Material Shape Paths for source and license details.

Anatomy

Highlight

Element	Part	Selector
<span>	root	[data-scope="loading-indicator"][data-part="root"] left_clickLMBCopy
<span>	container	[data-scope="loading-indicator"][data-part="container"] left_clickLMBCopy
<svg>	active-indicator-svg	[data-scope="loading-indicator"][data-part="active-indicator-svg"] left_clickLMBCopy
<path>	active-indicator	[data-scope="loading-indicator"][data-part="active-indicator"] left_clickLMBCopy

Props

Name	Description	Default	Control
variantOptional	Visual configuration of the loading indicator. uncontainedcontained	"uncontained"	checkuncontainedcontained
visibleOptional	Whether the loading indicator is visible. Hidden indicators keep their layout space. boolean | undefined	true	check
indicatorSizeOptional	CSS length used for the active indicator size. string | undefined	-
containerSizeOptional	CSS length used for both container dimensions. string | undefined	-
containerWidthOptional	CSS length used for the container width. string | undefined	-
containerHeightOptional	CSS length used for the container height. string | undefined	-
showDelayOptional	Delay in milliseconds before showing after visible becomes true. number | undefined	0
minHideDelayOptional	Minimum visible duration in milliseconds before hiding, capped at 1000ms. number | undefined	0
ariaLabelOptional	Accessible label. string | undefined	-	-

Events0

No events documented.

Slots0

No slots documented.

Styling7

Preview

Token	Description
--md-loading-indicator-active-indicator-colorColor Fallbackvar(--md-color-on-container,var(--md-sys-color-primary))	Controls active indicator color.
--md-loading-indicator-active-indicator-sizeLayout Fallback--dp(38)	Controls active indicator size.
--md-loading-indicator-contained-active-indicator-colorColor Fallbackvar(--md-color-on-container,var(--md-sys-color-on-primary-container))	Controls contained active indicator color.
--md-loading-indicator-contained-container-colorColor Fallbackvar(--md-color-container,var(--md-sys-color-primary-container))	Controls contained container color.
--md-loading-indicator-container-heightLayout Fallback--dp(48)	Controls container height.
--md-loading-indicator-container-shapeShape Fallbackvar(--md-shape-indicator)	Controls container shape.
--md-loading-indicator-container-widthLayout Fallback--dp(48)	Controls container width.

Examples

Default

Contained

Sizes