CircularProgressIndicator

Composable Component

Determinate Material Design circular progress indicator.

Circular progress indicator image
Common
@Composable
fun CircularProgressIndicator(
    @FloatRange(from = 0.0, to = 1.0) progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
    backgroundColor: Color = Color.Transparent,
    strokeCap: StrokeCap = StrokeCap.Butt,
)

Parameters
progress The progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range.
modifier the Modifier to be applied to this progress indicator
color The color of the progress indicator.
strokeWidth The stroke width for the progress indicator.
backgroundColor The color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet.
strokeCap stroke cap to use for the ends of this progress indicator
Common
@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
    backgroundColor: Color = Color.Transparent,
    strokeCap: StrokeCap = StrokeCap.Square,
)

Parameters
modifier the Modifier to be applied to this progress indicator
color The color of the progress indicator.
strokeWidth The stroke width for the progress indicator.
backgroundColor The color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet.
strokeCap stroke cap to use for the ends of this progress indicator
Common
Deprecated Maintained for binary compatibility
@Composable
fun CircularProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
) =
    CircularProgressIndicator(
        progress,
        modifier,
        color,
        strokeWidth,
        backgroundColor = Color.Transparent,
        strokeCap = StrokeCap.Butt,
    )
Common
Deprecated Maintained for binary compatibility
@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth,
) =
    CircularProgressIndicator(
        modifier,
        color,
        strokeWidth,
        backgroundColor = Color.Transparent,
        strokeCap = StrokeCap.Square,
    )

Code Examples

CircularProgressIndicatorSample

@Composable
fun CircularProgressIndicatorSample() {
    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(30.dp))
        OutlinedButton(onClick = { if (progress < 1f) progress += 0.1f }) { Text("Increase") }
    }
}