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

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



Determinate Material Design circular progress indicator.

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

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

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun CircularProgressIndicator(
    @FloatRange(from = 0.0, to = 1.0) progress: Float,
    modifier: Modifier = Modifier,
    startAngle: Float = 270f,
    endAngle: Float = startAngle,
    indicatorColor: Color = MaterialTheme.colors.primary,
    trackColor: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | Modifier to be applied to the CircularProgressIndicator |
| progress | The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. Values outside of this range are coerced into the range 0..1. |
| startAngle | The starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees (top of the screen) |
| endAngle | The ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to `startAngle` |
| indicatorColor | The color of the progress indicator bar. |
| trackColor | The color of the background progress track. |
| strokeWidth | The stroke width for the progress indicator. |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    startAngle: Float = 270f,
    indicatorColor: Color = MaterialTheme.colors.onBackground,
    trackColor: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.3f),
    strokeWidth: Dp = IndeterminateStrokeWidth,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | Modifier to be applied to the CircularProgressIndicator |
| startAngle | The starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees (top of the screen) |
| indicatorColor | The color of the progress indicator bar. |
| trackColor | The color of the background progress track |
| strokeWidth | The stroke width for the progress indicator. |






## Code Examples
### CircularProgressIndicatorFullscreenWithGap
```kotlin
@Composable
public fun CircularProgressIndicatorFullscreenWithGap() {
    CircularProgressIndicator(
        modifier = Modifier.fillMaxSize().padding(all = 1.dp).clearAndSetSemantics {},
        startAngle = 295.5f,
        endAngle = 245.5f,
        progress = 0.3f,
        strokeWidth = ProgressIndicatorDefaults.FullScreenStrokeWidth,
    )
}
```
### CircularProgressIndicatorWithAnimation
```kotlin
@Composable
public fun CircularProgressIndicatorWithAnimation() {
    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(10.dp))
        CompactChip(
            modifier = Modifier.width(90.dp),
            onClick = { if (progress < 1f) progress += 0.1f },
            label = { Text("Increase") },
        )
    }
}
```
### IndeterminateCircularProgressIndicator
```kotlin
@Composable
public fun IndeterminateCircularProgressIndicator() {
    CircularProgressIndicator()
}
```