# 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.

```kotlin
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.

```kotlin
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.

## Related components

- [Loading indicator](https://m3e.ljzapps.app/docs/components/loading-indicator.md)
- [Pull to refresh](https://m3e.ljzapps.app/docs/components/pull-to-refresh.md)
- [Slider](https://m3e.ljzapps.app/docs/components/slider.md)