Lottie animation in Streamlit

There was a case where I wanted to experiment with Jinja to inject Python data in a HTML file before rendering with components.html.

Today, another use case, inject a Lottie JSON file into the Lottie HTML player, this time I tried Jinja.You should be able to play exported After Effects animations with Lottie in Streamlit now ahah. Maybe even do a loading screen while some computation is in effect :wink: and there’s even a gallery of Lottie files

If someone wants to do a static component package out of it (like for Folium)…

TLDR: use Jinja to pass Python data in a HTML template.


Fascinating! The jinja piece is more exciting to me than Lottie itself, glad to see it’s so easy to incorporate jinja :partying_face:

1 Like

So here’s a package: Streamlit-Lottie :tada: still alpha, it seems it uses a lot of CPU, but I really want to try using Lottie animations as a loading spinner or computation success animation XD.

Code: https://github.com/andfanilo/streamlit-lottie
App: https://share.streamlit.io/andfanilo/streamlit-lottie-demo/app.py

Sorry @randyzwitch no Jinja in there :slight_smile:

Have fun.


This is totally awesome @andfanilo :star_struck:

1 Like

Welcome streamlit-lottie 0.0.3!

  • Added st_lottie_spinner context manager, so your Lottie animation plays until the end of the code in the with statement
import time
import requests

import streamlit as st
from streamlit_lottie import st_lottie_spinner

def load_lottieurl(url: str):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

lottie_url = "https://assets5.lottiefiles.com/packages/lf20_V9t630.json"
lottie_json = load_lottieurl(lottie_url)

with st_lottie_spinner(lottie_json):

Have a nice day,


Is there a way to use lottie file at the top in sidebar on the multipage app?

Hi :slight_smile:

I don’t understand how the lottie_spinner works… Seems it doesn’t work for me.

My app takes quite a long time to charge the background image, about 10 sec (I don’t know why).
And when I use the lottie_spinner, while charginf the image, nothing appears. But when I put just a time.sleep it works…

Here is the code I use.

To charge the image :

def get_base64(bin_file):
    with open(bin_file, 'rb') as f:
        data = f.read()
    return base64.b64encode(data).decode()

def set_background(png_file):
    bin_str = get_base64(png_file)
    page_bg_img = '''
    .stApp {
    background-image: url("data:image/png;base64,%s");
    background-size: cover;
    ''' % bin_str
    return st.markdown(page_bg_img, unsafe_allow_html=True)

To charge the lottie file :

def load_lottiefile(filepath: str):
    with open(filepath, "r") as f:
        return json.load(f)
lottie = load_lottiefile("lottie.json")
if selected == "Statistics & Predictions":
    col1,col2,col3 = st.columns(3)
    with col2:
        with st_lottie_spinner(lottie, loop=True, key="progress",width =300):

            def main():

I tried to put the set_background("background2.png") a bit everywhere but nothing expected…