---
title: Progress Indicators
date: '2025-07-02'
description: Renders the progress of a long-running operation.
---
<!-- AUTOGEN:START -->
:::preview[linearprogressindicator]
@code
```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.composables.uikit.components.LinearProgressIndicator
import kotlin.time.Duration.Companion.seconds
import kotlinx.coroutines.delay

@Composable
fun LinearProgressIndicatorExample() {
    var progress by remember { mutableStateOf(0.25f) }

    LaunchedEffect(Unit) {
        while (progress != 1f) {
            delay(1.seconds)
            progress += 0.1f
        }
    }

    LinearProgressIndicator(
        progress = progress,
        modifier = Modifier.fillMaxWidth()
    )
}
```
@end
:::

## Installation

{{uikit:installation}}

## Usage

### Linear Progress Indicator

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.composables.uikit.components.LinearProgressIndicator
import kotlin.time.Duration.Companion.seconds
import kotlinx.coroutines.delay

@Composable
fun LinearProgressIndicatorExample() {
    var progress by remember { mutableStateOf(0.25f) }

    LaunchedEffect(Unit) {
        while (progress != 1f) {
            delay(1.seconds)
            progress += 0.1f
        }
    }

    LinearProgressIndicator(
        progress = progress,
        modifier = Modifier.fillMaxWidth()
    )
}
```

### Intermediate Progress Indicator

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.uikit.components.IntermediateProgressIndicator
import com.composables.uikit.components.Text

@Composable
fun IntermediateProgressIndicatorExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        IntermediateProgressIndicator(Modifier.size(48.dp))
        Spacer(Modifier.height(32.dp))
        Text("Booking your reservation...")
    }
}
```
<!-- AUTOGEN:END -->