Streamlit Progress Bar
This displays a progress bar.
In Streamlit, we use st.progress() to display a horizontal progress bar.
st.progress(value, text=None)
Need a Streamlit developer? Click here
| Parameter | Type | Default | Description |
|---|---|---|---|
| value | int | 0 | Sets the initial progress (0–100). |
| text | str (optional) | None | Displays a label above the progress bar. |
| width | "stretch" or int | "stretch" | The width of the progress bar. • “stretch” → Expands to fit the parent container width. • int → A fixed width in pixels. If the given width exceeds the parent container, it defaults to the parent’s width. |
Simple Progress Bar
we create a progress bar at 0%
we loop from 0 – 100 to update progress
Then, we add a success message when complete.
import streamlit as st
import time
st.title("Simple Progress Bar Example")
progress_bar = st.progress(0)
status_text = st.empty()
for percent in range(101):
status_text.text(f"Progress: {percent}")
progress_bar.progress(percent)
time.sleep(0.05)
st.success("Task Completed")
Resetting a Progress Bar
Here, when we click on the start the bar progesses till 100.
Then when we click on reset, the bar resets back to zero
import streamlit as st
import time
st.title("Resetting a Progress Bar")
progress_bar = st.progress(0)
if st.button("Start Task"):
for i in range(101):
progress_bar.progress(i)
time.sleep(0.02)
if st.button("Resets"):
progress_bar.progress(0)
Show Percentage and Status
we can show the percentage and status of tasks with just a little tweak.
import streamlit as st
import time
st.title("Progress with Percentage")
progress_bar = st.progress(0)
status = st.empty()
for i in range(101):
progress_bar.progress(i)
status.text(f"Completed: {i}%")
time.sleep(0.03)
st.success("All task completed")
Multi-step Task Progress
we can show the progress for different tasks.
Here, we display a progress bar that iterates through 4 stages of a data pipeline.
It shows the current step thats being processed.
Then it marks success when all tasks are completed
import streamlit as st
import time
st.title("MultiStep Progress")
steps = ["Loading Data Sets", "Training Model", "Evaluating Results"]
progress_bar = st.progress(0)
status = st.empty()
for i, step in enumerate(steps):
status.text(f'Step {i + 1}/ {len(steps)}: {step}...')
progress_bar.progress(int((i+1) / len(steps) * 100))
time.sleep(2)
st.success("Pipeline Completed")
Spinners
Streamlit provides st.spinner() to show a loading animation
import streamlit as st
import time
st.title("Spinners")
with st.spinner("Processing..."):
time.sleep(3)
st.success("Done!")
Custom Progress Bars
Let’s create a colorful progress bar
check the color of the progress bar
import streamlit as st
import time
st.markdown(
"""
<style>
.stProgress > div > div > div > div {
background-color: #4CAF50;
}
</style>
""",
unsafe_allow_html=True
)
st.title("Custom Green Progress bar")
progress = st.progress(0)
for i in range(101):
progress.progress(i)
time.sleep(0.03)
Animated loader with Markdown
Here we are an animation as a loader
import streamlit as st
import time
st.title("Custom Animated Loader")
load_text = st.empty()
animation = ["⏳", "🔄", "🔃", "⌛"]
for i in range(20):
load_text.text(f"Processing {animation[i % len(animation)]}")
time.sleep(0.2)
st.success("Done!")
Want to learn more about Streamlit?: Click Here
Watch more videos on Streamlit:
