Wavy progress and LoadingIndicator in Compose

Wavy linear progress with its gap and stop dot, wavy circular, and the loading indicator morphing through its real shape sequence

Wait	Use
Known progress, visible for a while (download, upload)	LinearWavyProgressIndicator(progress = { … })
Unknown, short (loading a screen or list)	LoadingIndicator(), opt-in
Over content or in pull-to-refresh	ContainedLoadingIndicator(), opt-in
Dense or utilitarian UI	Flat LinearProgressIndicator / CircularProgressIndicator

The wavy indicators are stable in 1.5.0-beta02:

@Composable
fun DownloadProgress(progress: () -> Float) {
    // Wavy indicators are stable in 1.5.0. Use them for long, visible waits (downloads, uploads).
    LinearWavyProgressIndicator(progress = progress, modifier = Modifier.fillMaxWidth())
}

@Composable
fun SyncingSpinner() {
    CircularWavyProgressIndicator()
}

LoadingIndicator still needs an opt-in:

// LoadingIndicator is still experimental in 1.5.0-beta02, so opt in where you use it.
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun ScreenLoading() {
    // For short indeterminate waits (screen or content loading), instead of a circular spinner.
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        LoadingIndicator()
    }
}

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun ButtonLoading() {
    // Contained = on a filled circle, for use over content or inside pull-to-refresh.
    ContainedLoadingIndicator()
}

The demo above uses the real IndeterminateIndicatorPolygons sequence (SoftBurst, Cookie9Sided, Pentagon, Pill, Sunny, Cookie4Sided, Oval) and Morph output from androidx.graphics.shapes.

In Google’s examples the wave flattens into a straight bar when the work finishes. The track keeps a gap and a stop dot at the end.

Related: shapes · API status

Want your agent to get this right every time? Install the skill. If this page helped,star the repo on GitHub.