---
title: "InfiniteRepeatableSpec"
description: "[InfiniteRepeatableSpec] repeats the provided [animation] infinite amount of times. It will never
naturally finish. This means the animation will only be stopped via some form of manual
cancellation. When used with transition or other animation composables, the infinite animations
will stop when the composable is removed from the compose tree.

For non-infinite repeating animations, consider [RepeatableSpec].

[initialStartOffset] can be used to either delay the start of the animation or to fast forward
the animation to a given play time. This start offset will **not** be repeated, whereas the delay
in the [animation] (if any) will be repeated. By default, the amount of offset is 0."
type: "class"
---

<div class='type'>Class</div>


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

<div class='sourceset sourceset-common'>Common</div>


```kotlin
public class InfiniteRepeatableSpec<T>(
    public val animation: DurationBasedAnimationSpec<T>,
    public val repeatMode: RepeatMode = RepeatMode.Restart,
    public val initialStartOffset: StartOffset = StartOffset(0),
) : AnimationSpec<T>
```


`InfiniteRepeatableSpec` repeats the provided `animation` infinite amount of times. It will never
naturally finish. This means the animation will only be stopped via some form of manual
cancellation. When used with transition or other animation composables, the infinite animations
will stop when the composable is removed from the compose tree.

For non-infinite repeating animations, consider `RepeatableSpec`.

`initialStartOffset` can be used to either delay the start of the animation or to fast forward
the animation to a given play time. This start offset will **not** be repeated, whereas the delay
in the `animation` (if any) will be repeated. By default, the amount of offset is 0.

#### Parameters

| | |
| --- | --- |
| animation | the `AnimationSpec` to be repeated |
| repeatMode | whether animation should repeat by starting from the beginning (i.e. `RepeatMode.Restart`) or from the end (i.e. `RepeatMode.Reverse`) |
| initialStartOffset | offsets the start of the animation |



## Secondary Constructors

```kotlin
public constructor(
    animation: DurationBasedAnimationSpec<T>,
    repeatMode: RepeatMode = RepeatMode.Restart,
) : this(animation, repeatMode, StartOffset(0))
```


## Code Examples

### InfiniteProgressIndicator
```kotlin
@Composable
fun InfiniteProgressIndicator() {
    // This is an infinite progress indicator with 3 pulsing dots that grow and shrink.
    @Composable
    fun Dot(scale: State<Float>) {
        Box(
            Modifier.padding(5.dp)
                .size(20.dp)
                .graphicsLayer {
                    scaleX = scale.value
                    scaleY = scale.value
                }
                .background(Color.Gray, shape = CircleShape)
        )
    }
    val infiniteTransition = rememberInfiniteTransition()
    val scale1 =
        infiniteTransition.animateFloat(
            0.2f,
            1f,
            // No offset for the 1st animation
            infiniteRepeatable(tween(600), RepeatMode.Reverse),
        )
    val scale2 =
        infiniteTransition.animateFloat(
            0.2f,
            1f,
            infiniteRepeatable(
                tween(600),
                RepeatMode.Reverse,
                // Offsets the 2nd animation by starting from 150ms of the animation
                // This offset will not be repeated.
                initialStartOffset = StartOffset(offsetMillis = 150, StartOffsetType.FastForward),
            ),
        )
    val scale3 =
        infiniteTransition.animateFloat(
            0.2f,
            1f,
            infiniteRepeatable(
                tween(600),
                RepeatMode.Reverse,
                // Offsets the 3rd animation by starting from 300ms of the animation. This
                // offset will be not repeated.
                initialStartOffset = StartOffset(offsetMillis = 300, StartOffsetType.FastForward),
            ),
        )
    Row {
        Dot(scale1)
        Dot(scale2)
        Dot(scale3)
    }
}
```