LoadingBall
LoadingBall is used when there is an indeterminate loading time, when it is not possible to know the completion time. Meant to be used when the process lasts between 2 and 10 seconds.
Loading components indicates determinate or indeterminate loading time when retrieving data or performing slow computations.
Parameters
Modifier to be applied to the LoadingBall.
LoadingBallVariant defines the animation color and style. The default value is LoadingBallVariant.Emphasised.
LoadingBallSize defines the size of the loading ball. The default value is LoadingBallSize.Medium.
See also
Samples
val initialValue = .5f
val labels = listOf("Loading", "Stay put", "Still working", "Nearly there", "Finishing up soon")
var loadingTextIndex by remember { mutableIntStateOf(0) }
var progress by remember { mutableFloatStateOf(initialValue) }
LaunchedEffect(0) {
while (true) {
progress = (progress + 0.1f) % 1.0f
loadingTextIndex = (loadingTextIndex + 1) % labels.size
delay(1000)
}
}
SkapaTheme2(isSystemInDarkTheme()) {
Column {
Box(
modifier = Modifier
.padding(SkapaSpacing.space100)
.align(Alignment.CenterHorizontally)
) {
// Simple Loading Ball
LoadingBall(
variant = LoadingBallVariant.Emphasised, size = LoadingBallSize.Large
)
}
Box(
modifier = Modifier
.padding(SkapaSpacing.space100)
.align(Alignment.CenterHorizontally)
) {
// Loading ball with label
LoadingBall(
text = labels[loadingTextIndex],
variant = LoadingBallVariant.Primary,
labelTransition = true // Need to set true to enable label animation
)
}
}
}LoadingBall is used when there is an indeterminate loading time, when it is not possible to know the completion time. Meant to be used when the process lasts between 2 and 10 seconds.
Loading components indicates determinate or indeterminate loading time when retrieving data or performing slow computations.
Parameters
Label to give context around the task being processed.
Modifier to be applied to the LoadingBall
LoadingBallVariant defines the animation color and style. The default value is LoadingBallVariant.Emphasised.
Animate label on value update.
See also
Samples
val initialValue = .5f
val labels = listOf("Loading", "Stay put", "Still working", "Nearly there", "Finishing up soon")
var loadingTextIndex by remember { mutableIntStateOf(0) }
var progress by remember { mutableFloatStateOf(initialValue) }
LaunchedEffect(0) {
while (true) {
progress = (progress + 0.1f) % 1.0f
loadingTextIndex = (loadingTextIndex + 1) % labels.size
delay(1000)
}
}
SkapaTheme2(isSystemInDarkTheme()) {
Column {
Box(
modifier = Modifier
.padding(SkapaSpacing.space100)
.align(Alignment.CenterHorizontally)
) {
// Simple Loading Ball
LoadingBall(
variant = LoadingBallVariant.Emphasised, size = LoadingBallSize.Large
)
}
Box(
modifier = Modifier
.padding(SkapaSpacing.space100)
.align(Alignment.CenterHorizontally)
) {
// Loading ball with label
LoadingBall(
text = labels[loadingTextIndex],
variant = LoadingBallVariant.Primary,
labelTransition = true // Need to set true to enable label animation
)
}
}
}