Material Design determinate circular progress indicator Progress indicators express an unspecified wait time or display the duration of a process.
CircularWavyProgressIndicatorSample
@Preview
@Sampled
@Composable
fun CircularWavyProgressIndicatorSample() {
val sliderState = rememberSliderState(0.1f)
val animatedProgress by
animateFloatAsState(
targetValue = sliderState.value,
animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
)
Column(horizontalAlignment = Alignment.CenterHorizontally) {
CircularWavyProgressIndicator(progress = { animatedProgress })
Spacer(Modifier.requiredHeight(30.dp))
Text("Set progress:")
Slider(
state = sliderState,
onValueChange = { sliderState.value = it },
modifier = Modifier.width(300.dp),
)
}
}
CircularThickWavyProgressIndicatorSample
@Preview
@Sampled
@Composable
fun CircularThickWavyProgressIndicatorSample() {
val sliderState = rememberSliderState(0.1f)
val animatedProgress by
animateFloatAsState(
targetValue = sliderState.value,
animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
)
val thickStrokeWidth = with(LocalDensity.current) { 8.dp.toPx() }
val thickStroke =
remember(thickStrokeWidth) { Stroke(width = thickStrokeWidth, cap = StrokeCap.Round) }
Column(horizontalAlignment = Alignment.CenterHorizontally) {
CircularWavyProgressIndicator(
progress = { animatedProgress },
// Thick size is slightly larger than the
// WavyProgressIndicatorDefaults.CircularContainerSize default
modifier = Modifier.size(52.dp), // Thick size is slightly larger than the default
stroke = thickStroke,
trackStroke = thickStroke,
)
Spacer(Modifier.requiredHeight(30.dp))
Text("Set progress:")
Slider(
state = sliderState,
onValueChange = { sliderState.value = it },
modifier = Modifier.width(300.dp),
)
}
}
IndeterminateCircularWavyProgressIndicatorSample
@Preview
@Sampled
@Composable
fun IndeterminateCircularWavyProgressIndicatorSample() {
Column(horizontalAlignment = Alignment.CenterHorizontally) { CircularWavyProgressIndicator() }
}