---
title: Progress Indicators
description: Determinate and indeterminate indicators for loading and task progress.
---

Use progress indicators to show completion state or ongoing work.

<UiDemo id="progress-indicator" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/Progress.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Indeterminate

<UiDemo id="progress-indicator-indeterminate" />

## API Reference

### ProgressIndicator

A determinate progress indicator for known completion state.

```kotlin
@Composable
fun ProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(999.dp),
    trackColor: Color = Theme[colors][controlColor],
    indicatorColor: Color = Theme[colors][primaryColor],
    borderColor: Color = Color.Unspecified,
    height: Dp = 6.dp,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `progress` | `Float` | Current progress value clamped between 0 and 1. |
| `modifier` | `Modifier` | Modifier applied to the indicator. |
| `shape` | `Shape` | Shape used for the track and indicator. |
| `trackColor` | `Color` | Color used for the indicator track. |
| `indicatorColor` | `Color` | Color used for the active progress indicator. |
| `borderColor` | `Color` | Optional border color drawn around the track. |
| `height` | `Dp` | Height of the progress indicator. |

### IndeterminateProgressIndicator

A looping progress indicator for ongoing work without a known end point.

```kotlin
@Composable
fun IndeterminateProgressIndicator(
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(999.dp),
    trackColor: Color = Theme[colors][controlColor],
    indicatorColor: Color = Theme[colors][primaryColor],
    borderColor: Color = Color.Unspecified,
    height: Dp = 6.dp,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the indicator. |
| `shape` | `Shape` | Shape used for the track and indicator. |
| `trackColor` | `Color` | Color used for the indicator track. |
| `indicatorColor` | `Color` | Color used for the active progress indicator. |
| `borderColor` | `Color` | Optional border color drawn around the track. |
| `height` | `Dp` | Height of the progress indicator. |