# CircularProgressIndicator

## 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/wear/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(androidx.compose.ui.Modifier,androidx.wear.compose.material3.ProgressIndicatorColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ProgressIndicatorColors, strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Indeterminate Material Design circular progress indicator. |
| `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/wear/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Float,kotlin.Float,androidx.wear.compose.material3.ProgressIndicatorColors,androidx.compose.ui.unit.Dp,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, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, allowProgressOverflow: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, startAngle: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, endAngle: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ProgressIndicatorColors, strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Material Design circular progress indicator. |

## Functions

### CircularProgressIndicator

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

```
@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.IndeterminateStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)
): Unit
```

Indeterminate Material Design circular progress indicator.

Indeterminate progress indicator expresses an unspecified wait time and spins indefinitely.

Example of indeterminate circular progress indicator:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator

Box(modifier = Modifier.fillMaxSize()) {
    CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the CircularProgressIndicator. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ProgressIndicatorColors = ProgressIndicatorDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator. |
| `strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = CircularProgressIndicatorDefaults.IndeterminateStrokeWidth` | The stroke width for the progress indicator. The recommended values is `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicatorDefaults#IndeterminateStrokeWidth()`. |
| `gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)` | 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. |

### CircularProgressIndicator

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

```
@Composable
fun CircularProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)
): Unit
```

Material Design circular progress indicator. Progress changes are animated.

Example of a full screen `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Float,kotlin.Float,androidx.wear.compose.material3.ProgressIndicatorColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. Note that the padding `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicatorDefaults#FullScreenPadding()` should be applied:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    CircularProgressIndicator(progress = { 0.25f }, startAngle = 120f, endAngle = 60f)
}
```

![FullScreenProgressIndicatorSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_FullScreenProgressIndicatorSample_CompositeImage.png)

Example of progress showing overflow value (more than 1) by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Float,kotlin.Float,androidx.wear.compose.material3.ProgressIndicatorColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    CircularProgressIndicator(
        // Overflow value of 120%
        progress = { 1.2f },
        allowProgressOverflow = true,
        startAngle = 120f,
        endAngle = 60f,
    )
}
```

![OverflowProgressIndicatorSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_OverflowProgressIndicatorSample_CompositeImage.png)

Example of progress indicator wrapping media control by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Float,kotlin.Float,androidx.wear.compose.material3.ProgressIndicatorColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`:

```kotlin
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton
import androidx.wear.compose.material3.IconButtonDefaults
import androidx.wear.compose.material3.MaterialTheme

var isPlaying by remember { mutableStateOf(false) }
val buttonPadding = 4.dp
val progressStrokeWidth = 4.dp
val progress = 0.75f

Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
    // The CircularProgressIndicator should be around the IconButton, with an extra gap between
    // then of 'buttonPadding'. We multiply by 2 because the size includes progressStrokeWidth
    // at top and bottom and the buttonPadding at top and bottom.
    CircularProgressIndicator(
        modifier =
            Modifier.align(Alignment.Center)
                .size(
                    IconButtonDefaults.DefaultButtonSize +
                        progressStrokeWidth * 2 +
                        buttonPadding * 2
                ),
        progress = { progress },
        strokeWidth = progressStrokeWidth,
    )

    IconButton(
        modifier =
            Modifier.align(Alignment.Center)
                .semantics {
                    // Set custom progress semantics for accessibility.
                    contentDescription =
                        String.format(
                            "Play/pause button, track progress: %.0f%%",
                            progress * 100,
                        )
                }
                .clip(CircleShape)
                .background(MaterialTheme.colorScheme.surfaceContainerLow),
        onClick = { isPlaying = !isPlaying },
    ) {
        Icon(
            imageVector = if (isPlaying) Icons.Filled.Close else Icons.Filled.PlayArrow,
            contentDescription = null,
        )
    }
}
```

![MediaButtonProgressIndicatorSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_MediaButtonProgressIndicatorSample_CompositeImage.png)

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicator.composable#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Float,kotlin.Float,androidx.wear.compose.material3.ProgressIndicatorColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` with small progress values:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.ProgressIndicatorDefaults

Box {
    CircularProgressIndicator(
        // Small progress values like 2% will be rounded up to at least the stroke width.
        progress = { 0.02f },
        modifier =
            Modifier.fillMaxSize().padding(CircularProgressIndicatorDefaults.FullScreenPadding),
        startAngle = 120f,
        endAngle = 60f,
        strokeWidth = 10.dp,
        colors =
            ProgressIndicatorDefaults.colors(
                indicatorColor = Color.Green,
                trackColor = Color.White,
            ),
    )
}
```

![SmallValuesProgressIndicatorSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_SmallValuesProgressIndicatorSample_CompositeImage.png)

Progress indicators express the proportion of completion of an ongoing task.

| 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 completion. Progress changes will be animated. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the CircularProgressIndicator. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | 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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | 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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ProgressIndicatorColors#overflowTrackBrush(kotlin.Boolean,kotlin.Float)`. 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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = CircularProgressIndicatorDefaults.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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicatorDefaults#StartAngle()` (top of the screen). |
| `endAngle: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = startAngle` | 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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#CircularProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Float,kotlin.Float,androidx.wear.compose.material3.ProgressIndicatorColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ProgressIndicatorColors = ProgressIndicatorDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator in different states. |
| `strokeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = CircularProgressIndicatorDefaults.largeStrokeWidth` | The stroke width for the progress indicator. The recommended values are `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicatorDefaults#largeStrokeWidth()` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CircularProgressIndicatorDefaults#smallStrokeWidth()`. |
| `gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)` | 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. |