Loading indicator
A morphing shape that shows an indeterminate wait of up to a few seconds.
- Category: Communication
- API status: Expressive
- Compose APIs:
LoadingIndicator,ContainedLoadingIndicator,LoadingIndicatorDefaults - Interactive page: https://m3e.ljzapps.app/#components/loading-indicator
When to use
Use it for short waits such as pull to refresh. For longer or measurable work, use a progress indicator.
The indicator cycles through a sequence of shapes while it rotates. Pass a progress lambda to drive the morph from a known value instead.
Playground
The interactive page has a playground with live property controls for this component and generated code.
Examples
Plain and contained
The contained version sits on a rounded container.
LoadingIndicator()
ContainedLoadingIndicator()
Driven by progress
The morph follows the progress value.
val transition = rememberInfiniteTransition(label = "progress")
val progress by transition.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(tween(3_000, easing = LinearEasing), RepeatMode.Restart),
label = "progress",
)
LoadingIndicator(progress = { progress })
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
progress | () -> Float | Optional. When set, the indicator is determinate and morphs with the value from 0 to 1. | |
color | Color | LoadingIndicatorDefaults.indicatorColor | Color of the shape. |
polygons | List<RoundedPolygon> | IndeterminateIndicatorPolygons | Shapes to morph between. |
containerColor | Color | containedContainerColor | Contained only. Color of the container. |
Guidelines
Do:
- Use for waits of one to a few seconds.
- Place it where the content will appear.
Don't:
- Do not show it for waits you can measure. Use a progress indicator.
- Do not show several at once.
Accessibility
- Announce the loading state through the surrounding content, for example with a live region or a status message.
- Do not use it alone to block interaction for long. Offer a way to cancel.