# ContainedLoadingIndicator

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3ExpressiveApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/ContainedLoadingIndicator.composable#ContainedLoadingIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, indicatorColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, containerShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, polygons: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/graphics/shapes/RoundedPolygon> )` A Material Design contained loading indicator. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3ExpressiveApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/ContainedLoadingIndicator.composable#ContainedLoadingIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)( progress: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, indicatorColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, containerShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, polygons: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/graphics/shapes/RoundedPolygon> )` A Material Design contained loading indicator. | Cmn |

## Functions

### ContainedLoadingIndicator

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/LoadingIndicator.kt+function:ContainedLoadingIndicator)

```
@ExperimentalMaterial3ExpressiveApi
@Composable
fun ContainedLoadingIndicator(
    modifier: Modifier = Modifier,
    containerColor: Color = LoadingIndicatorDefaults.containedContainerColor,
    indicatorColor: Color = LoadingIndicatorDefaults.containedIndicatorColor,
    containerShape: Shape = LoadingIndicatorDefaults.containerShape,
    polygons: List<RoundedPolygon> = LoadingIndicatorDefaults.IndeterminateIndicatorPolygons
): Unit
```

A Material Design contained loading indicator.

This version of the loading indicator animates and morphs between various shapes as long as the loading indicator is visible. The shapes in this variation are contained within a colored `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ContainedLoadingIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)`.

![Contained loading indicator
image](https://developer.android.com/images/reference/androidx/compose/material3/contained-loading-indicator.png)

It can be created like this:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.ContainedLoadingIndicator
import androidx.compose.material3.LoadingIndicator
import androidx.compose.ui.Alignment

Column(horizontalAlignment = Alignment.CenterHorizontally) { ContainedLoadingIndicator() }
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this loading indicator |
| `containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = LoadingIndicatorDefaults.containedContainerColor` | the loading indicator's container color |
| `indicatorColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = LoadingIndicatorDefaults.containedIndicatorColor` | the loading indicator's color |
| `containerShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = LoadingIndicatorDefaults.containerShape` | the loading indicator's container shape |
| `polygons: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/graphics/shapes/RoundedPolygon> = LoadingIndicatorDefaults.IndeterminateIndicatorPolygons` | a list of `https://developer.android.com/reference/kotlin/androidx/graphics/shapes/RoundedPolygon`s for the sequence of shapes this loading indicator will morph between. The loading indicator expects at least two items in that list. |

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ContainedLoadingIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)` list holds less than two items |

### ContainedLoadingIndicator

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/LoadingIndicator.kt+function:ContainedLoadingIndicator)

```
@ExperimentalMaterial3ExpressiveApi
@Composable
fun ContainedLoadingIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    containerColor: Color = LoadingIndicatorDefaults.containedContainerColor,
    indicatorColor: Color = LoadingIndicatorDefaults.containedIndicatorColor,
    containerShape: Shape = LoadingIndicatorDefaults.containerShape,
    polygons: List<RoundedPolygon> = LoadingIndicatorDefaults.DeterminateIndicatorPolygons
): Unit
```

A Material Design contained loading indicator.

This version of the loading indicator morphs between its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ContainedLoadingIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)` shapes by the value of its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ContainedLoadingIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)`. The shapes in this variation are contained within a colored `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ContainedLoadingIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)`.

![Contained loading indicator
image](https://developer.android.com/images/reference/androidx/compose/material3/contained-loading-indicator.png)

It can be created like this:

```kotlin
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ContainedLoadingIndicator
import androidx.compose.material3.LoadingIndicator
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSliderState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val sliderState = rememberSliderState()
val animatedProgress by
    animateFloatAsState(
        targetValue = sliderState.value,
        animationSpec =
            spring(
                dampingRatio = Spring.DampingRatioNoBouncy,
                stiffness = Spring.StiffnessVeryLow,
                visibilityThreshold = 1 / 1000f,
            ),
    )

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    ContainedLoadingIndicator(progress = { animatedProgress })
    Spacer(Modifier.requiredHeight(30.dp))
    Text("Set loading progress:")
    Slider(
        state = sliderState,
        onValueChange = { sliderState.value = it },
        modifier = Modifier.width(300.dp),
    )
}
```

It can also be used as an indicator for a `https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshBox.composable#PullToRefreshBox(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.pulltorefresh.PullToRefreshState,androidx.compose.ui.Alignment,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.unit.Dp,kotlin.Function1)` like this:

```kotlin
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.ListItem
import androidx.compose.material3.LoadingIndicator
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
import androidx.compose.material3.pulltorefresh.pullToRefresh
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer

var itemCount by remember { mutableStateOf(15) }
var isRefreshing by remember { mutableStateOf(false) }
val state = rememberPullToRefreshState()
val coroutineScope = rememberCoroutineScope()
val onRefresh: () -> Unit = {
    isRefreshing = true
    coroutineScope.launch {
        // fetch something
        delay(5000)
        itemCount += 5
        isRefreshing = false
    }
}

val scaleFraction = {
    if (isRefreshing) 1f
    else LinearOutSlowInEasing.transform(state.distanceFraction).coerceIn(0f, 1f)
}

Scaffold(
    modifier =
        Modifier.pullToRefresh(
            state = state,
            isRefreshing = isRefreshing,
            onRefresh = onRefresh,
        ),
    topBar = {
        TopAppBar(
            title = { Text("TopAppBar") },
            // Provide an accessible alternative to trigger refresh.
            actions = {
                IconButton(onClick = onRefresh) {
                    Icon(Icons.Filled.Refresh, "Trigger Refresh")
                }
            },
        )
    },
) {
    Box(Modifier.padding(it)) {
        LazyColumn(Modifier.fillMaxSize()) {
            if (!isRefreshing) {
                items(itemCount) { ListItem { Text(text = "Item ${itemCount - it}") } }
            }
        }
        Box(
            Modifier.align(Alignment.TopCenter).graphicsLayer {
                scaleX = scaleFraction()
                scaleY = scaleFraction()
            }
        ) {
            PullToRefreshDefaults.LoadingIndicator(state = state, isRefreshing = isRefreshing)
        }
    }
}
```

| Parameters |
|---|---|
| `progress: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | the progress of this loading indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range. The indicator will morph its shapes between the provided `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ContainedLoadingIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)` according to the value of the progress. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this loading indicator |
| `containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = LoadingIndicatorDefaults.containedContainerColor` | the loading indicator's container color |
| `indicatorColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = LoadingIndicatorDefaults.containedIndicatorColor` | the loading indicator's color |
| `containerShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = LoadingIndicatorDefaults.containerShape` | the loading indicator's container shape |
| `polygons: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/graphics/shapes/RoundedPolygon> = LoadingIndicatorDefaults.DeterminateIndicatorPolygons` | a list of `https://developer.android.com/reference/kotlin/androidx/graphics/shapes/RoundedPolygon`s for the sequence of shapes this loading indicator will morph between as it progresses from 0.0 to 1.0. The loading indicator expects at least two items in that list. |

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ContainedLoadingIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,kotlin.collections.List)` list holds less than two items |