Progress Indicators

Renders the progress of a long-running operation.

Linear Progress Indicator

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.composables.uikit.components.LinearProgressIndicator
import kotlin.time.Duration.Companion.seconds
import kotlinx.coroutines.delay

@Composable
fun LinearProgressIndicatorExample() {
    var progress by remember { mutableStateOf(0.25f) }

    LaunchedEffect(Unit) {
        while (progress != 1f) {
            delay(1.seconds)
            progress += 0.1f
        }
    }

    LinearProgressIndicator(
        progress = progress,
        modifier = Modifier.fillMaxWidth()
    )
}

Intermediate Progress Indicator

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.uikit.components.IntermediateProgressIndicator
import com.composables.uikit.components.Text

@Composable
fun IntermediateProgressIndicatorExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        IntermediateProgressIndicator(Modifier.size(48.dp))
        Spacer(Modifier.height(32.dp))
        Text("Booking your reservation...")
    }
}