Three Dots Loading Animation with Jetpack Compose

Souvik Sarkar on 2025-02-08

Three Dots Loading Animation with Jetpack Compose

Sometimes in life, finding the easiest solutions is hard. That’s why in this article, we’ll talk about creating a simple Three Dots Loading Animation in Jetpack Compose.

So, let’s dive in.

Before I begin with my story, if you aren’t a Medium Member, feel free to read the full story here.

Animation Setup:

val infiniteTransition = rememberInfiniteTransition()

// First dot animation (starts immediately)
val anchor1 by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(500), // 0.5 second animation
            repeatMode = RepeatMode.Reverse // Ping-pong effect
        )
    )

// Second dot animation (250ms delay for staggered effect
val anchor2 by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(500),
            initialStartOffset = StartOffset(250, StartOffsetType.Delay), // Stagger delay
            repeatMode = RepeatMode.Reverse
        )
    )

// Third dot animation (500ms delay)
val anchor3 by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation =…