You can use Animation check the below code for Ripple Animation
@Composable
fun RippleLoadingAnimation(
circleColor: Color = Color.Magenta,
animationDelay: Int = 1500
) {
// 3 circles
val circles = listOf(
remember {
Animatable(initialValue = 0f)
},
remember {
Animatable(initialValue = 0f)
},
remember {
Animatable(initialValue = 0f)
}
)
circles.forEachIndexed { index, animatable ->
LaunchedEffect(Unit) {
// Use coroutine delay to sync animations
// divide the animation delay by number of circles
delay(timeMillis = (animationDelay / 3L) * (index + 1))
animatable.animateTo(
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = tween(
durationMillis = animationDelay,
easing = LinearEasing
),
repeatMode = RepeatMode.Restart
)
)
}
}
// outer circle
Box(
modifier = Modifier
.size(size = 200.dp)
.background(color = Color.Transparent)
) {
// animating circles
circles.forEachIndexed { index, animatable ->
Box(
modifier = Modifier
.scale(scale = animatable.value)
.size(size = 200.dp)
.clip(shape = CircleShape)
.background(
color = circleColor
.copy(alpha = (1 - animatable.value))
)
) {
}
}
}
}