---
title: "ScrollIndicator"
description: "A composable that displays a visual indicator of scrolling progress within a scrollable
container."
type: "component"
---

<div class='type'>Composable Component</div>



A composable that displays a visual indicator of scrolling progress within a scrollable
container.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun ScrollIndicator(
    state: ScrollState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = false,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec,
)
```


#### Parameters

| | |
| --- | --- |
| state | The scrollState to use as the basis for the ScrollIndicatorState. |
| modifier | The modifier to be applied to the component - usually set to `Modifier.align(Alignment.CenterEnd)`. |
| colors | `ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`. |
| reverseDirection | Reverses direction of ScrollIndicator if true |
| positionAnimationSpec | `AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead. |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun ScrollIndicator(
    state: ScalingLazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec,
)
```


#### Parameters

| | |
| --- | --- |
| state | the `ScalingLazyListState` to use as the basis for the ScrollIndicatorState. |
| modifier | The modifier to be applied to the component |
| colors | `ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`. |
| reverseDirection | Reverses direction of ScrollIndicator if true. The default value is inferred from the `reverseLayout` property of the provided `ScalingLazyListState`, ensuring the indicator automatically matches the list's layout direction. |
| positionAnimationSpec | `AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead. |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun ScrollIndicator(
    state: TransformingLazyColumnState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec,
)
```


#### Parameters

| | |
| --- | --- |
| state | the `TransformingLazyColumnState` to use as the basis for the ScrollIndicatorState. |
| modifier | The modifier to be applied to the component |
| colors | `ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`. |
| reverseDirection | Reverses direction of ScrollIndicator if true. The default value is inferred from the `reverseLayout` property of the provided `TransformingLazyColumnState`, ensuring the indicator automatically matches the list's layout direction. |
| positionAnimationSpec | `AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead. |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun ScrollIndicator(
    state: LazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec,
)
```


#### Parameters

| | |
| --- | --- |
| state | the `LazyListState` to use as the basis for the ScrollIndicatorState. |
| modifier | The modifier to be applied to the component |
| colors | `ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`. |
| reverseDirection | Reverses direction of ScrollIndicator if true. The default value is inferred from the `reverseLayout` property of the provided `LazyListState`, ensuring the indicator automatically matches the list's layout direction. |
| positionAnimationSpec | `AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead. |






## Code Examples
### ScrollIndicatorWithColumnSample
```kotlin
@Preview
@Composable
fun ScrollIndicatorWithColumnSample() {
    val scrollState = rememberScrollState()
    Box {
        Column(
            modifier = Modifier.fillMaxSize().verticalScroll(scrollState),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            repeat(100) { Text(text = "Item $it") }
        }
        ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
    }
}
```
### ScrollIndicatorWithLCSample
```kotlin
@Preview
@Composable
fun ScrollIndicatorWithLCSample() {
    val scrollState = rememberLazyListState()
    Box {
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            state = scrollState,
        ) {
            items(100) { Text(text = "Item $it") }
        }
        ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
    }
}
```
### ScrollIndicatorWithSLCSample
```kotlin
@Preview
@Composable
fun ScrollIndicatorWithSLCSample() {
    val scrollState = rememberScalingLazyListState()
    Box {
        ScalingLazyColumn(modifier = Modifier.fillMaxSize(), state = scrollState) {
            items(100) { Text(text = "Item $it") }
        }
        ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
    }
}
```
### ScrollIndicatorWithTLCSample
```kotlin
@Preview
@Composable
fun ScrollIndicatorWithTLCSample() {
    val scrollState = rememberTransformingLazyColumnState()
    Box {
        TransformingLazyColumn(modifier = Modifier.background(Color.Black), state = scrollState) {
            items(100) { Text(text = "Item $it") }
        }
        ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
    }
}
```