Material Design determinate wavy linear progress indicator Progress indicators express an unspecified wait time or display the duration of a process.
LinearWavyProgressIndicatorSample
@Preview
@Sampled
@Composable
fun LinearWavyProgressIndicatorSample() {
val sliderState = rememberSliderState(0.1f)
val animatedProgress by
animateFloatAsState(
targetValue = sliderState.value,
animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
)
Column(horizontalAlignment = Alignment.CenterHorizontally) {
LinearWavyProgressIndicator(progress = { animatedProgress })
Spacer(Modifier.requiredHeight(30.dp))
Text("Set progress:")
Slider(
state = sliderState,
onValueChange = { sliderState.value = it },
modifier = Modifier.width(300.dp),
)
}
}
LinearThickWavyProgressIndicatorSample
@Preview
@Sampled
@Composable
fun LinearThickWavyProgressIndicatorSample() {
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) {
LinearWavyProgressIndicator(
progress = { animatedProgress },
// Thick height is slightly higher than the
// WavyProgressIndicatorDefaults.LinearContainerHeight default
modifier = Modifier.height(14.dp),
stroke = thickStroke,
trackStroke = thickStroke,
)
Spacer(Modifier.requiredHeight(30.dp))
Text("Set progress:")
Slider(
state = sliderState,
onValueChange = { sliderState.value = it },
modifier = Modifier.width(300.dp),
)
}
}
IndeterminateLinearWavyProgressIndicatorSample
@Preview
@Sampled
@Composable
fun IndeterminateLinearWavyProgressIndicatorSample() {
Column(horizontalAlignment = Alignment.CenterHorizontally) { LinearWavyProgressIndicator() }
}