Jetpack Compose: LottieSwipeRefreshIndicator

Simplest way to use Lottie Files as a SwipeRefreshLayout

Just a quick note, here is how to use CustomSwipeRefresh in accompanist using LottieRefreshIndicator

Use it in coordination with accompanist swipe refresh

Be sure to add this library in the build.gralde

implementation “com.google.accompanist:accompanist-swiperefresh:0.10.0”

var loading by viewModel.loading.collectAsState() //observerAsState for livedata

SwipeRefresh(
            state = rememberSwipeRefreshState(isRefreshing = !loading),
            onRefresh = {
                //Refresh
            },
            indicator = { state, trigger ->
                LottieRefreshIndicator(state = state, refreshTriggerDistance = trigger, animation = R.raw.monitor_progress)
            },
        ) {
            //Content
        }

Here is the LottieRefreshIndicator file:

https://raw.githubusercontent.com/nabil6391/LottieSwipeRefreshLayout/master/LottieSwipeRefreshLayout/src/main/java/com/nabilmh/lottieswiperefreshlayout/LottieRefreshIndicator.kt

Visit the example here at

https://github.com/nabil6391/LottieSwipeRefreshLayout

Update, October 2026

Accompanist's SwipeRefresh has been deprecated in favour of the pull-to-refresh APIs in Compose Material and Material 3 (PullToRefreshBox in Material 3). The idea here, replacing the default spinner with a Lottie animation, still works there by passing your own indicator.