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

progressThe 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.
modifierthe Modifier to be applied to this progress indicator
colorThe color of the progress indicator.
strokeWidthThe stroke width for the progress indicator.
backgroundColorThe color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet.
strokeCapstroke 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

modifierthe Modifier to be applied to this progress indicator
colorThe color of the progress indicator.
strokeWidthThe stroke width for the progress indicator.
backgroundColorThe color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet.
strokeCapstroke 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") }
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled

Chip Divider