CircularProgressIndicator

Functions summary

Unit
@Composable
CircularProgressIndicator(
    modifier: Modifier,
    startAngle: Float,
    indicatorColor: Color,
    trackColor: Color,
    strokeWidth: Dp
)

Indeterminate Material Design circular progress indicator.
Unit
@Composable
CircularProgressIndicator(
    progress: @FloatRange(from = 0.0, to = 1.0) Float,
    modifier: Modifier,
    startAngle: Float,
    endAngle: Float,
    indicatorColor: Color,
    trackColor: Color,
    strokeWidth: Dp
)

Determinate Material Design circular progress indicator.

Functions

CircularProgressIndicator

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

Indeterminate Material Design circular progress indicator.

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

Progress Indicator doc Progress indicator image

Example of indeterminate progress indicator:

import androidx.wear.compose.material.CircularProgressIndicator

CircularProgressIndicator()
Parameters
modifier: Modifier = Modifier

Modifier to be applied to the CircularProgressIndicator
startAngle: Float = 270.0f

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: Color = MaterialTheme.colors.onBackground

The color of the progress indicator bar.
trackColor: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.3f)

The color of the background progress track
strokeWidth: Dp = IndeterminateStrokeWidth

The stroke width for the progress indicator.

CircularProgressIndicator

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

Determinate Material Design circular progress indicator.

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

Progress Indicator doc Progress indicator image

There is no animation between progress values by default, but progress can be animated with the recommended ProgressIndicatorDefaults.ProgressAnimationSpec, as in the following example:

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.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.CircularProgressIndicator
import androidx.wear.compose.material.CompactChip
import androidx.wear.compose.material.ProgressIndicatorDefaults
import androidx.wear.compose.material.Text

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") },
    )
}

CircularProgressIndicator supports a gap in the circular track between endAngle and startAngle, which leaves room for other content, such as TimeText at the top of the screen. This sample also shows how to disable accessibility semantics for the fullscreen CircularProgressIndicator:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.CircularProgressIndicator
import androidx.wear.compose.material.ProgressIndicatorDefaults

CircularProgressIndicator(
    modifier = Modifier.fillMaxSize().padding(all = 1.dp).clearAndSetSemantics {},
    startAngle = 295.5f,
    endAngle = 245.5f,
    progress = 0.3f,
    strokeWidth = ProgressIndicatorDefaults.FullScreenStrokeWidth,
)
Parameters
progress: @FloatRange(from = 0.0, to = 1.0) Float

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.
modifier: Modifier = Modifier

Modifier to be applied to the CircularProgressIndicator
startAngle: Float = 270.0f

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: Float = 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 startAngle
indicatorColor: Color = MaterialTheme.colors.primary

The color of the progress indicator bar.
trackColor: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.1f)

The color of the background progress track.
strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth

The stroke width for the progress indicator.