DEV Community

Cover image for Streamlit Part 8: Status Elements
James
James

Posted on

Streamlit Part 8: Status Elements

Welcome back to Streamlit Part 8: Status Elements! In this installment, we'll dive into the various status elements Streamlit offers to enhance the user experience in your app by providing visual feedback during operations.

If you haven't already, you'll want to import Streamlit as st, configure your page, and lay out the framework to follow along. Run the app by typing streamlit run app.py in your terminal, and let's get started.

Implementing Progress Bars

The first status element we'll look at is the progress bar. This is a great way to visually indicate the progress of a long-running task, like data processing or a complex computation.

To create a progress bar in Streamlit:

  1. Define some text to be displayed alongside the progress bar.
  2. Use st.progress() to initialize it.
  3. Create a for-loop to simulate progress, adding a sleep delay to visualize the updates.
progress_text = "Operation in progress. Please wait."
my_bar = st.progress(value=0, text=progress_text)

for percent_complete in range(100):
    time.sleep(0.01)
    my_bar.progress(percent_complete + 1, text=progress_text)

time.sleep(0.5)
my_bar.empty()  # Clears the progress bar

Enter fullscreen mode Exit fullscreen mode

To make the app interactive, consider adding a Rerun button that reloads the app so users can re-run the progress bar.

st.button("Rerun")

Enter fullscreen mode Exit fullscreen mode

Exploring Status and Success Elements

Next up is the success bar. This can be used to show a successful outcome or completion of an operation.

st.success("This is a status message!", icon="")

Enter fullscreen mode Exit fullscreen mode

It’s a simple but effective way to show users when things go smoothly!

Using Spinners for Operations

A spinner is a great way to indicate that something is running in the background. This is especially useful when you want to keep users informed without blocking the interface.

with st.spinner("In progress..."):
    time.sleep(1.5)

st.success("Done!")

Enter fullscreen mode Exit fullscreen mode

This code will display a spinner while the time.sleep() function runs, then show a success message when finished.

Handling Errors and Warnings

To handle error scenarios or warnings, you can use st.error() and st.warning() respectively. These functions make it very easy to communicate issues clearly.

st.error("This is an error message!")
st.warning("This is a warning message!")

Enter fullscreen mode Exit fullscreen mode

They display red and yellow messages, making it easy for users to differentiate between errors and warnings.

Displaying Info and Exceptions

For general information, use st.info(). It's useful for providing informative messages during interactions.

st.info("This is an info message!")

Enter fullscreen mode Exit fullscreen mode

Additionally, if you need to display exceptions (for debugging purposes), use st.exception(). This can be handy when you want users or developers to understand why something has gone wrong.

try:
    raise Exception("This is an exception!")
except Exception as e:
    st.exception(e)

Enter fullscreen mode Exit fullscreen mode

This will show the full traceback, providing valuable context during development.

Fun with Balloons and Snow

Streamlit also offers some whimsical features to add fun effects to your app. You can use balloons and snow to add a bit of celebration or a seasonal touch!

  • Balloons:
bbtn = st.button("Click me to display balloons")
if bbtn:
    st.balloons()

Enter fullscreen mode Exit fullscreen mode
  • Snow:
snow_btn = st.button("Click me to display snow")
if snow_btn:
    st.snow()

Enter fullscreen mode Exit fullscreen mode

These effects are purely visual, but they can add a fun flair to your app for special occasions.

Conclusion and Next Steps

That’s it for Streamlit Part 8: Status Elements! These elements can help keep your users informed about what’s happening behind the scenes and make the overall experience more interactive.

I hope you enjoyed this tutorial! See you in the next installment!


🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee

Top comments (0)