Material 3 Progress Indicators in Jetpack Compose

Get started with Material 3 progress indicators in Jetpack Compose to create user-friendly interfaces for showing operation status.

Explore Progress Indicator Styles

Learn to implement two Material 3 progress indicator types for showing operation progress, available as linear or circular bars.

Linear Determinate Progress Indicator

Shows exact progress with a horizontal bar.

@Composable
fun LinearDeterminateIndicator() {
    // Creates a simple linear determinate indicator with fixed progress
    LinearProgressIndicator(
        progress = { 0.5f }, // *Required: Sets current progress (0.0 to 1.0)
        modifier = Modifier.fillMaxWidth() // *Required: Sets indicator to fill available width
    )
}
  

Use a Linear Determinate Progress Indicator when you want to show exact progress with a horizontal bar.

Examples:

• Show file upload progress in a cloud storage app
• Display data processing completion in an analytics app
• Indicate download progress in a file manager

---

Circular Indeterminate Progress Indicator

Shows ongoing operation with a circular stroke.

@Composable
fun CircularIndeterminateIndicator() {
    // Creates a simple circular indeterminate indicator for ongoing operations
    CircularProgressIndicator(
        modifier = Modifier.width(64.dp), // *Required: Sets indicator size
        color = MaterialTheme.colorScheme.secondary, // Sets indicator color
        trackColor = MaterialTheme.colorScheme.surfaceVariant // Sets track background color
    )
}
  

Use a Circular Indeterminate Progress Indicator when you want to show an ongoing operation with a circular stroke.

Examples:

• Show page loading in a web browser app
• Indicate data syncing in a cloud app
• Display processing in a photo editing app

---

Progress Indicator Properties

Understand the key properties used in the progress indicator examples.

Property	Usage
progress	Sets the current progress (0.0 to 1.0) for determinate indicators
modifier*	Required: Customizes layout, like size or width (e.g., fillMaxWidth or 64.dp)
color	Sets the color of the progress indicator (e.g., secondary color)
trackColor	Sets the background color of the track behind the indicator