DEV Community

Cover image for Streamlit Part 8: Status Elements
James
James

Posted on

1

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

Please leave your appreciation by commenting on this post!

It takes one minute and is worth it for your career.

Let's go

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay