Design/net.ikea.skapa.ui.components/LoadingBall

LoadingBall

@Composable
fun LoadingBall(modifier: Modifier = Modifier, variant: LoadingBallVariant = LoadingBallVariant.Emphasised, size: LoadingBallSize = LoadingBallSize.Medium)

LoadingBall is used when there is a indeterminate loading time, when it is not possible to know the completion time. Meant to be used when the process lasts between 2 to 10 seconds.

Loading components indicates determinate or indeterminate loading time when retrieving data or performing slow computations.

Parameters

modifier

Modifier to be applied to the LoadingBall.

variant

LoadingBallVariant defines the animation color and style. The default value is LoadingBallVariant.Emphasised.

size

LoadingBallSize defines the size of the loading ball. The default value is LoadingBallSize.Medium.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.delay
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.LoadingBall
import net.ikea.skapa.ui.components.LoadingBallSize
import net.ikea.skapa.ui.components.LoadingBallVariant
import net.ikea.skapa.ui.components.LoadingLinear

fun main() { 
   //sampleStart 
   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)
    }
}

SkapaThemeM3(darkTheme = 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
            )
        }
    }
} 
   //sampleEnd
}
@Composable
fun LoadingBall(text: String, modifier: Modifier = Modifier, variant: LoadingBallVariant = LoadingBallVariant.Emphasised, labelTransition: Boolean = false)

LoadingBall is used when there is a indeterminate loading time, when it is not possible to know the completion time. Meant to be used when the process lasts between 2 to 10 seconds.

Loading components indicates determinate or indeterminate loading time when retrieving data or performing slow computations.

Parameters

text

Label to give context around the task being processed.

modifier

Modifier to be applied to the LoadingBall

variant

LoadingBallVariant defines the animation color and style. The default value is LoadingBallVariant.Emphasised.

labelTransition

Animate label on value update.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.delay
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.LoadingBall
import net.ikea.skapa.ui.components.LoadingBallSize
import net.ikea.skapa.ui.components.LoadingBallVariant
import net.ikea.skapa.ui.components.LoadingLinear

fun main() { 
   //sampleStart 
   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)
    }
}

SkapaThemeM3(darkTheme = 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
            )
        }
    }
} 
   //sampleEnd
}