Streamlit Lottie
Integrate Lottie animations inside your Streamlit app!
Install
pip install streamlit-lottie
Usage
- Basic usage
import streamlit as st
from streamlit_lottie import st_lottie
with st.echo():
st_lottie("https://assets5.lottiefiles.com/packages/lf20_V9t630.json")
- Basic usage (with monkey patched
st.lottie
function)
import streamlit as st
import streamlit_lottie
with st.echo():
st.lottie("https://assets5.lottiefiles.com/packages/lf20_V9t630.json")
- Context manager usage, using
with
notation
import time
import streamlit as st
from streamlit_lottie import st_lottie
with st_lottie("https://assets5.lottiefiles.com/packages/lf20_V9t630.json"):
time.sleep(5)
- Download lottie manually example
import time
import requests
import streamlit as st
from streamlit_lottie import st_lottie
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_hello = "https://assets5.lottiefiles.com/packages/lf20_V9t630.json"
lottie_url_download = "https://assets4.lottiefiles.com/private_files/lf30_t26law.json"
lottie_hello = load_lottieurl(lottie_url_hello)
lottie_download = load_lottieurl(lottie_url_download)
st_lottie(lottie_hello, key="hello")
if st.button("Download"):
with st_lottie_spinner(lottie_download, key="download"):
time.sleep(5)
st.balloons()
Development
Install
- JS side
cd frontend
npm install
- Python side
conda create -n streamlit-lottie python=3.7
conda activate streamlit-lottie
pip install -e .
Run
Both webpack dev server and Streamlit need to run for development mode.
- JS side
cd frontend
npm run start
- Python side
streamlit run app.py
References
- Lottie-web (Official)
- react-lottie (chenqingspring)
- lottie-react-web (felippenardi)
- lottie-react (gamote)
- lottie-react (LottieFiles)
- react-lottie-player (mifi)
- lottie-interactivity