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

LoadingLinear

@Composable
fun LoadingLinear(modifier: Modifier = Modifier, text: String? = null, progress: Float = 0.0f, labelPosition: LabelPosition.Horizontal = LabelPosition.Horizontal.Center, labelTransition: Boolean = false, width: Dp = IndicatorWidth)

Loading Linear is used when there is a determinate loading time, when it is possible to know the completion time. Meant to be used when the process takes more than 10 seconds. Preferable when time remaining can be displayed.

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

Parameters

modifier

Modifier to be applied to the LoadingLinear

text

The text do be displayed below loading indicator

progress

The progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range.

labelPosition

indicates whether the label will be displayed. The default value is LabelPosition.Horizontal.Center.

labelTransition

controls whether the text switching transition is animated or not.

width

controls whether the text switching transition is animated or not.

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)
    }
}

SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    Column {
        Box(
            modifier = Modifier
                .padding(SkapaSpacing.space100)
                .align(Alignment.CenterHorizontally)
        ) {
            // Linear Loading
            LoadingLinear(text = "Loading. Completed ${(progress * 100).toInt()}%", progress = progress)
        }
    }
} 
   //sampleEnd
}