# Loading indicator

> A morphing shape that shows an indeterminate wait of up to a few seconds.

- Category: Communication
- API status: Expressive
- Compose APIs: `LoadingIndicator`, `ContainedLoadingIndicator`, `LoadingIndicatorDefaults`
- Interactive page: https://m3e.ljzapps.app/#components/loading-indicator

## When to use

Use it for short waits such as pull to refresh. For longer or measurable work, use a progress indicator.

The indicator cycles through a sequence of shapes while it rotates. Pass a progress lambda to drive the morph from a known value instead.

## Playground

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

## Examples

### Plain and contained

The contained version sits on a rounded container.

```kotlin
LoadingIndicator()
ContainedLoadingIndicator()
```

### Driven by progress

The morph follows the progress value.

```kotlin
val transition = rememberInfiniteTransition(label = "progress")
val progress by transition.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(tween(3_000, easing = LinearEasing), RepeatMode.Restart),
    label = "progress",
)

LoadingIndicator(progress = { progress })
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `progress` | `() -> Float` |  | Optional. When set, the indicator is determinate and morphs with the value from 0 to 1. |
| `color` | `Color` | `LoadingIndicatorDefaults.indicatorColor` | Color of the shape. |
| `polygons` | `List<RoundedPolygon>` | `IndeterminateIndicatorPolygons` | Shapes to morph between. |
| `containerColor` | `Color` | `containedContainerColor` | Contained only. Color of the container. |

## Guidelines

Do:
- Use for waits of one to a few seconds.
- Place it where the content will appear.

Don't:
- Do not show it for waits you can measure. Use a progress indicator.
- Do not show several at once.

## Accessibility

- Announce the loading state through the surrounding content, for example with a live region or a status message.
- Do not use it alone to block interaction for long. Offer a way to cancel.

## Related components

- [Progress indicator](https://m3e.ljzapps.app/docs/components/progress-indicator.md)
- [Pull to refresh](https://m3e.ljzapps.app/docs/components/pull-to-refresh.md)