---
title: "CircularProgressIndicator"
description: "Determinate Material Design circular progress indicator."
type: "component"
social_image: "/static/images/material/circular-progress-indicator.png"
---

<div class='type'>Composable Component</div>



Determinate Material Design circular progress indicator.

<img loading='lazy' class='hero-img' alt='Circular progress indicator image' src='/static/images/material/circular-progress-indicator.png'>

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun CircularProgressIndicator(
    @FloatRange(from = 0.0, to = 1.0) progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
    backgroundColor: Color = Color.Transparent,
    strokeCap: StrokeCap = StrokeCap.Butt,
)
```


#### Parameters

| | |
| --- | --- |
| progress | 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 | the `Modifier` to be applied to this progress indicator |
| color | The color of the progress indicator. |
| strokeWidth | The stroke width for the progress indicator. |
| backgroundColor | The color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet. |
| strokeCap | stroke cap to use for the ends of this progress indicator |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
    backgroundColor: Color = Color.Transparent,
    strokeCap: StrokeCap = StrokeCap.Square,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | the `Modifier` to be applied to this progress indicator |
| color | The color of the progress indicator. |
| strokeWidth | The stroke width for the progress indicator. |
| backgroundColor | The color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet. |
| strokeCap | stroke cap to use for the ends of this progress indicator |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Maintained for binary compatibility

```kotlin
@Composable
fun CircularProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
) =
    CircularProgressIndicator(
        progress,
        modifier,
        color,
        strokeWidth,
        backgroundColor = Color.Transparent,
        strokeCap = StrokeCap.Butt,
    )
```


<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Maintained for binary compatibility

```kotlin
@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
) =
    CircularProgressIndicator(
        modifier,
        color,
        strokeWidth,
        backgroundColor = Color.Transparent,
        strokeCap = StrokeCap.Square,
    )
```




## Code Examples
### CircularProgressIndicatorSample
```kotlin
@Composable
fun CircularProgressIndicatorSample() {
    var progress by remember { mutableStateOf(0.1f) }
    val animatedProgress by
        animateFloatAsState(
            targetValue = progress,
            animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
        )
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        CircularProgressIndicator(progress = animatedProgress)
        Spacer(Modifier.requiredHeight(30.dp))
        OutlinedButton(onClick = { if (progress < 1f) progress += 0.1f }) { Text("Increase") }
    }
}
```