Changing each progress bar to different colors

Hello everyone!

Below is the example of current status, but I want each bar to show different colors.
Is there way to achieve this in Streamlit?

Screen Shot 2021-11-04 at 2.13.46 PM

Thank you!

1 Like

I am facing a similar problem. Is there a way to style individual instances of a component?

1 Like

change the default progress bar color, you can do like this:

st.markdown(
    """
    <style>
        .stProgress > div > div > div > div {
            background-image: linear-gradient(to right, #99ff99 , #00ccff);
        }
    </style>""",
    unsafe_allow_html=True,
)

Thank you @BeyondMyself, I’m able to change the default color, but wondering if there is a way to change the color of individual progress bar components.

Hey! Has anyone found any smart tricks for doing this?

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.