Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andfanilo/streamlit-lottie
Streamlit component to render Lottie animations
https://github.com/andfanilo/streamlit-lottie
lottie python react streamlit
Last synced: 3 days ago
JSON representation
Streamlit component to render Lottie animations
- Host: GitHub
- URL: https://github.com/andfanilo/streamlit-lottie
- Owner: andfanilo
- License: apache-2.0
- Created: 2020-11-15T22:58:44.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-05T13:53:10.000Z (over 1 year ago)
- Last Synced: 2024-10-29T23:44:25.301Z (3 months ago)
- Topics: lottie, python, react, streamlit
- Language: Python
- Homepage: https://lottie.streamlit.app/
- Size: 913 KB
- Stars: 169
- Watchers: 7
- Forks: 19
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Streamlit Lottie
[](https://share.streamlit.io/andfanilo/streamlit-lottie-demo/master/app.py)
Integrate [Lottie](https://lottiefiles.com/) animations inside your Streamlit app!
## Install
```
pip install streamlit-lottie
```
## Usage
* Basic usage
```python
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)
```python
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
```python
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
```python
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
```shell script
cd frontend
npm install
```
- Python side
```shell script
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
```shell script
cd frontend
npm run start
```
- Python side
```shell script
streamlit run app.py
```
## References
- [Lottie-web (Official)](https://github.com/airbnb/lottie-web)
- [react-lottie (chenqingspring)](https://github.com/chenqingspring/react-lottie)
- [lottie-react-web (felippenardi)](https://github.com/felippenardi/lottie-react-web)
- [lottie-react (gamote)](https://github.com/gamote/lottie-react)
- [lottie-react (LottieFiles)](https://github.com/LottieFiles/lottie-react)
- [react-lottie-player (mifi)](https://github.com/mifi/react-lottie-player)
- [lottie-interactivity](https://github.com/LottieFiles/lottie-interactivity)
# Support me
