New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material Compose

CircularProgressIndicator

Android

Determinate Material Design circular progress indicator.

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

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-beta03")
}

Overloads

@Composable
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

namedescription
modifierModifier to be applied to the CircularProgressIndicator
progressThe 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.
startAngleThe 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)
endAngleThe 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]
indicatorColorThe color of the progress indicator bar.
trackColorThe color of the background progress track.
strokeWidthThe stroke width for the progress indicator.
@Composable
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

namedescription
modifierModifier to be applied to the CircularProgressIndicator
startAngleThe 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)
indicatorColorThe color of the progress indicator bar.
trackColorThe color of the background progress track
strokeWidthThe stroke width for the progress indicator.

Code Examples

CircularProgressIndicatorWithAnimation

@Composable
@Sampled
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") }
        )
    }
}

CircularProgressIndicatorFullscreenWithGap

@Composable
@Sampled
public fun CircularProgressIndicatorFullscreenWithGap() {
    CircularProgressIndicator(
        modifier = Modifier.fillMaxSize().padding(all = 1.dp),
        startAngle = 295.5f,
        endAngle = 245.5f,
        progress = 0.3f,
        strokeWidth = ProgressIndicatorDefaults.FullScreenStrokeWidth
    )
}

IndeterminateCircularProgressIndicator

@Composable
@Sampled
public fun IndeterminateCircularProgressIndicator() {
    CircularProgressIndicator()
}