---
title: "drawCircularProgressIndicator"
description: "Draw a simple non-animating circular progress indicator. Prefer to use
[CircularProgressIndicator] directly instead of this method in order to access the recommended
animations, but this method can be used when custom animations are required.

Example of a circular progress indicator with custom progress animation:"
type: "function"
---

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-android'>Android</div>


```kotlin
public fun DrawScope.drawCircularProgressIndicator(
    progress: Float,
    colors: ProgressIndicatorColors,
    strokeWidth: Dp,
    enabled: Boolean = true,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth),
)
```


Draw a simple non-animating circular progress indicator. Prefer to use
`CircularProgressIndicator` directly instead of this method in order to access the recommended
animations, but this method can be used when custom animations are required.

Example of a circular progress indicator with custom progress animation:

#### Parameters

| | |
| --- | --- |
| progress | The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. |
| colors | `ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator in different states. |
| strokeWidth | The stroke width for the progress indicator. The recommended values are `CircularProgressIndicatorDefaults.largeStrokeWidth` and `CircularProgressIndicatorDefaults.smallStrokeWidth`. |
| enabled | controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is `false`, this component will appear visually disabled. |
| allowProgressOverflow | When progress overflow is allowed, values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color `ProgressIndicatorColors.overflowTrackBrush`. For example values 1.2, 2.2 etc will be shown as 20% progress with the overflow color. When progress overflow is not allowed, progress values will be 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 `CircularProgressIndicatorDefaults.StartAngle` (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`. |
| gapSize | The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke endcaps are not included in this distance. |




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


> **Deprecated** This overload is provided for backwards compatibility with Compose for Wear OS 1.5. A newer overload is available without the unused targetProgress parameter

```kotlin
public fun DrawScope.drawCircularProgressIndicator(
    progress: Float,
    colors: ProgressIndicatorColors,
    strokeWidth: Dp,
    enabled: Boolean = true,
    targetProgress: Float = progress,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth),
): Unit
```


Draw a simple non-animating circular progress indicator. Prefer to use
`CircularProgressIndicator` directly instead of this method in order to access the recommended
animations, but this method can be used when custom animations are required.

Example of a circular progress indicator with custom progress animation:

#### Parameters

| | |
| --- | --- |
| progress | The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. |
| colors | `ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator in different states. |
| strokeWidth | The stroke width for the progress indicator. The recommended values are `CircularProgressIndicatorDefaults.largeStrokeWidth` and `CircularProgressIndicatorDefaults.smallStrokeWidth`. |
| enabled | controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is `false`, this component will appear visually disabled. |
| targetProgress | Target value if the progress value is to be animated. For a static progress indicator this should be equal to progress. This parameter is currently not used. |
| allowProgressOverflow | When progress overflow is allowed, values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color `ProgressIndicatorColors.overflowTrackBrush`. For example values 1.2, 2.2 etc will be shown as 20% progress with the overflow color. When progress overflow is not allowed, progress values will be 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 `CircularProgressIndicatorDefaults.StartAngle` (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`. |
| gapSize | The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke endcaps are not included in this distance. |




## Code Examples
### CircularProgressIndicatorCustomAnimationSample
```kotlin
@Composable
fun CircularProgressIndicatorCustomAnimationSample() {
    val progress = remember { mutableFloatStateOf(0f) }
    val animatedProgress = remember { Animatable(0f) }
    val colors =
        ProgressIndicatorDefaults.colors(indicatorColor = Color.Green, trackColor = Color.White)
    LaunchedEffect(Unit) {
        snapshotFlow(progress::value).collectLatest {
            animatedProgress.animateTo(it, tween(durationMillis = 1024, easing = LinearEasing))
        }
    }
    Box(
        modifier =
            Modifier.background(MaterialTheme.colorScheme.background)
                .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
                .fillMaxSize()
    ) {
        Button(
            modifier = Modifier.align(Alignment.Center).padding(12.dp),
            onClick = { progress.floatValue = if (progress.floatValue == 0f) 1f else 0f },
            label = { Text("Animate") },
        )
        // Draw the circular progress indicator with custom animation
        Spacer(
            Modifier.fillMaxSize().focusable().drawBehind {
                drawCircularProgressIndicator(
                    progress = animatedProgress.value,
                    strokeWidth = 10.dp,
                    colors = colors,
                    startAngle = 120f,
                    endAngle = 60f,
                )
            }
        )
    }
}
```