---
url: /components/progress-indicators/overview.md
description: >-
  Progress indicators inform users about the status of ongoing processes, such
  as loading an app. It show the status of a process in real time.
---

# Progress indicators

Progress indicators inform users about the status of ongoing processes, such as loading an app. It show the status of a process in real time.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Progress indicators](/assets/b98c24cf-mrolmmmc-progress-indicator.C3WMPOdH.webp)

* Two variants: linear and circular
* Use the same configuration for all instances of a process (like loading)
* They capture attention through motion
* Option to apply a wave to the active track for use cases that would benefit from increased expressiveness

![8 progress indicators configured to show different thickness and shape.](/assets/b8b3d490-mleotj2q-01.Drt2btvL.webp)

Linear and circular progress indicators have visual configurations for shape and thickness

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/progress) | Available |
| Implementation | [Jetpack Compose: Expressive](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator\(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp\)) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/ProgressIndicator.md) | Available |
| Implementation | [Android Views (MDC-Android): Expressive](https://github.com/material-components/material-components-android/blob/master/docs/components/ProgressIndicator.md) | Available |
| Implementation | [Web](https://github.com/material-components/material-web/blob/main/docs/components/progress.md) | Available |
| Implementation | Web: Expressive | Unavailable |

## M3 Expressive update

**Aug 2024**

The progress indicators have configurations for height and wavy shape. Choose the visual style that best fits your product. [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

* Track height: Configurable
* Shape: Wavy

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fm0qvxgu6-Progress-Indicator-Overview.mp4?alt=media" aria-label="Progress indicators used when loading a page and for processing a payment."></video>

Progress indicators have a new rounded, colorful style, and more configurations to choose from, including a wavy shape and variable track height

## Previous updates

**Dec 2023: Non-text contrast (NTC)**

* Anatomy: Added an end stop indicator to improve accessibility
* Contrast: Higher contrast between track and active indicator to enhance the perception of progress
* Motion: New motion behavior
* Shape: Rounded corners

![GM3 linear and circular progress indicators](/assets/b169ade7-mleov4bo-03.BLMRX0Ow.webp)

Progress indicators have a new rounded, colorful style

## Differences from M2

**July 2022: Added to Material 3**

* **Color:** New color mappings and compatibility with dynamic color

![M2 linear and circular progress indicators.](/assets/d1f02e10-m0c2if7i-04.CACR7Au3.webp)

M2: Progress indicators have a boxier, neutral style

![M3 linear and circular progress indicators.](/assets/dbf18474-m0c2jf26-05.DbMCHpHE.webp)

M3: Progress indicators are compatible with dynamic color