# CircularProgressIndicator

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.StrokeCap,androidx.compose.ui.unit.Dp)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, strokeCap: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeCap, gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` [Material Design determinate circular progress indicator](https://m3.material.io/components/progress-indicators/overview) | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable [CircularProgressIndicator](https://developer.android.com/reference/kotlin/androidx/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Float,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.StrokeCap))( progress: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, strokeCap: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeCap )` **This function is deprecated.** Use the overload that takes \`progress\` as a lambda | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.StrokeCap,androidx.compose.ui.unit.Dp)( progress: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, strokeCap: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeCap, gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` [Material Design determinate circular progress indicator](https://m3.material.io/components/progress-indicators/overview) | Cmn |

## Functions

### CircularProgressIndicator

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/ProgressIndicator.kt+function:CircularProgressIndicator)

```
@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularIndeterminateTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularIndeterminateStrokeCap,
    gapSize: Dp = ProgressIndicatorDefaults.CircularIndicatorTrackGapSize
): Unit
```

[Material Design determinate circular progress indicator](https://m3.material.io/components/progress-indicators/overview)

Progress indicators express an unspecified wait time or display the duration of a process.

![Circular progress indicator
image](https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flqdiyyvh-1P-progress-indicator-configurations.png?alt=media)

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.ui.Alignment

Column(horizontalAlignment = Alignment.CenterHorizontally) { CircularProgressIndicator() }
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this progress indicator |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = ProgressIndicatorDefaults.circularColor` | color of this progress indicator |
| `strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ProgressIndicatorDefaults.CircularStrokeWidth` | stroke width of this progress indicator |
| `trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = ProgressIndicatorDefaults.circularIndeterminateTrackColor` | color of the track behind the indicator, visible when the progress has not reached the area of the overall indicator yet |
| `strokeCap: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeCap = ProgressIndicatorDefaults.CircularIndeterminateStrokeCap` | stroke cap to use for the ends of this progress indicator |
| `gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ProgressIndicatorDefaults.CircularIndicatorTrackGapSize` | size of the gap between the progress indicator and the track |

### CircularProgressIndicator

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/ProgressIndicator.kt+function:CircularProgressIndicator)

```
@Composable
fun [CircularProgressIndicator](https://developer.android.com/reference/kotlin/androidx/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Float,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.StrokeCap))(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Use the overload that takes \`progress\` as a lambda, use this instead:
>
> ```kotlin
> CircularProgressIndicator(
> progress = { progress },
> modifier = modifier,
> color = color,
> strokeWidth = strokeWidth,
> trackColor = trackColor,
> strokeCap = strokeCap,
> )
> ```

### CircularProgressIndicator

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/ProgressIndicator.kt+function:CircularProgressIndicator)

```
@Composable
fun CircularProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularDeterminateTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap,
    gapSize: Dp = ProgressIndicatorDefaults.CircularIndicatorTrackGapSize
): Unit
```

[Material Design determinate circular progress indicator](https://m3.material.io/components/progress-indicators/overview)

Progress indicators express an unspecified wait time or display the duration of a process.

![Circular progress indicator
image](https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flqdiyyvh-1P-progress-indicator-configurations.png?alt=media)

By default there is no animation between `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.StrokeCap,androidx.compose.ui.unit.Dp)` values. You can use `https://developer.android.com/reference/kotlin/androidx/compose/material3/ProgressIndicatorDefaults#ProgressAnimationSpec()` as the default recommended `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec` when animating progress, such as in the following example:

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ProgressIndicatorDefaults
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSliderState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val sliderState = rememberSliderState(0.1f)
val animatedProgress by
    animateFloatAsState(
        targetValue = sliderState.value,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
    )

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    CircularProgressIndicator(progress = { animatedProgress })
    Spacer(Modifier.requiredHeight(30.dp))
    Text("Set progress:")
    Slider(
        state = sliderState,
        onValueChange = { sliderState.value = it },
        modifier = Modifier.width(300.dp),
    )
}
```

| Parameters |
|---|---|
| `progress: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | the progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this progress indicator |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = ProgressIndicatorDefaults.circularColor` | color of this progress indicator |
| `strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ProgressIndicatorDefaults.CircularStrokeWidth` | stroke width of this progress indicator |
| `trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = ProgressIndicatorDefaults.circularDeterminateTrackColor` | color of the track behind the indicator, visible when the progress has not reached the area of the overall indicator yet |
| `strokeCap: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap` | stroke cap to use for the ends of this progress indicator |
| `gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ProgressIndicatorDefaults.CircularIndicatorTrackGapSize` | size of the gap between the progress indicator and the track |