🤔 Documentation issue? Report or edit

CircularProgressIndicator¶

A CircularProgressIndicator can be used to display a progress in circular shape. There are two kinds:

Indeterminate

CircularProgressIndicator()

When you use the CircularProgressIndicator without the progress parameter, it will run forever.

Determinate

CircularProgressIndicator(progress = 0.5f)

When you set a value to the progress parameter, the indicator will be shown with that progress. E.g. a progress of 0.5f will fill it to the half.

Example¶

@Composable
fun CircularProgressIndicatorSample() {
    var progress by remember { mutableStateOf(0.1f) }
    val animatedProgress = animateFloatAsState(
        targetValue = progress,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
    ).value

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Spacer(Modifier.height(30.dp))
        Text("CircularProgressIndicator with undefined progress")
        CircularProgressIndicator()
        Spacer(Modifier.height(30.dp))
        Text("CircularProgressIndicator with progress set by buttons")
        CircularProgressIndicator(progress = animatedProgress)
        Spacer(Modifier.height(30.dp))
        OutlinedButton(
            onClick = {
                if (progress < 1f) progress += 0.1f
            }
        ) {
            Text("Increase")
        }

        OutlinedButton(
            onClick = {
                if (progress > 0f) progress -= 0.1f
            }
        ) {
            Text("Decrease")
        }
    }
}

CircularProgressIndicator¶

Example¶

See also:¶