Change the progress bar color

🎈 Using Streamlit
1

Hi!

Is there any way to change the default color blue of a progress bar?

I want it to change to red or yellow but couldn’t find any way to do it.

Thanks in advance :slightly_smiling_face:

1 Like
2

Hey @Jose_Diaz, Welcome to the community !

You can use this for now,

import streamlit as st 
from time import sleep

st.markdown("""
<style>
.stProgress .st-bo {
    background-color: green;
}
</style>
""", unsafe_allow_html=True)


progress = st.progress(0)

for i in range(100):
    progress.progress(i)
    sleep(0.1)

image
image809×164 739 Bytes

The support for theming is in development, so you can expect it to be much more straight forward in future !
Hope it helps ! :slight_smile:

3

Thank you so much!

4

can i ask any documentation of it .

cant find any details in

thanks

Jeff

5

Hi @apex_yu,
Its not documented.
The code just overrides the CSS class .st-bo’s background color property for progressbars ( which has CSS class named .stProgress ). One way to figure this out is by just looking at chrome dev tools’ inspect element.
Attaching a screenshot for reference.

image
image1762×729 69.2 KB

Hope it helps

1 Like
6

thanks

7

Hi @ash2shukla,

there’s a problem with your solution: As far as I understand it, streamlit assigns CSS classes like .st-bo dynamically during runtime (I assume based on a grid layout), and your component is not necessarily guaranteed to get the same class each time.

So, your solution can work if the layout is static/looks the same at each run (but even then the class is probably not .st-bo; you have to look it up through the dev tools, as you pointed out) but it breaks for more complex layouts that you change during runtime (e.g. if you show some components based on the user input).

Happy to hear from anyone with more insight, I couldn’t find a reliable way to do this yet :slight_smile:

1 Like
8

Hey @jreke,

Thanks for pointing that out!

I dont think there can be any reliable solution to this right now for complex layouts, But the custom CSS feature is in development.
One more way that I can think of is to set the st.markdown dynamically as per the current layout.

SUB_CLASS_MAP = {
        "main": ".st-bo",
        "column": ".st-cs"
}

st.markdown(f"""
        <style>
                .stProgress {SUB_CLASS_MAP[the_key_goes_here]} {{
                background-color: green;
                }}
        </style>
        """, unsafe_allow_html=True)

Its definitely ugly but the your app will be able to adapt to the layout changes this way.

Hope it helps !

9

I think I found a solution now: The progress bar is nestled in a few divs within the div of class .stProgress. So if you add CSS like below, it should reliably colorize only the progress bar itself, not the surrounding divs :slight_smile:

st.markdown(
    """
    <style>
        .stProgress > div > div > div > div {
            background-color: green;
        }
    </style>""",
    unsafe_allow_html=True,
)

Let me know if that works!

7 Likes