Progress indicator

Shows how far an operation has come, as a bar or a ring, flat or wavy.

Category: Communication
API status: Expressive
Compose APIs: LinearProgressIndicator, CircularProgressIndicator, LinearWavyProgressIndicator, CircularWavyProgressIndicator
Interactive page: https://m3e.ljzapps.app/#components/progress-indicator

When to use

Use a determinate indicator when you know the progress, and an indeterminate one when you only know that work is going on. The wavy shapes are the Expressive style. They suit longer waits where the user watches the screen.

Wavy indicators calm down to a straight line when the work ends and when the amplitude is zero.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Linear

Flat, wavy and indeterminate.

Column(Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(24.dp)) {
    LinearProgressIndicator(progress = { 0.4f }, modifier = Modifier.fillMaxWidth())
    LinearWavyProgressIndicator(progress = { 0.4f }, modifier = Modifier.fillMaxWidth())
    LinearWavyProgressIndicator(modifier = Modifier.fillMaxWidth())
}

Circular

Flat, wavy and indeterminate.

CircularProgressIndicator(progress = { 0.4f })
CircularWavyProgressIndicator(progress = { 0.4f })
CircularWavyProgressIndicator()

Parameters

Name	Type	Default	Description
`progress`	`() -> Float`		Current value from 0 to 1. Omit for indeterminate.
`amplitude`	`Float \| (Float) -> Float`	`1f`	Wave height. Pass a lambda to shape it by progress.
`wavelength`	`Dp`	`WavyProgressIndicatorDefaults`	Distance between wave peaks.
`color / trackColor`	`Color`	`indicatorColor / trackColor`	Colors of the active part and the track.

Guidelines

Do:

Use determinate indicators whenever you can measure.
Keep indicators close to the content they affect.

Don't:

Do not combine a linear and a circular indicator for the same task.
Do not animate faster than the real progress.

Accessibility

Determinate indicators expose their value as a range to screen readers.
Pair the indicator with text such as 40 percent complete when the exact value matters.
Do not rely on the wave alone to convey the value.