Changing each progress bar to different colors

Using Streamlit
1

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
2

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

1 Like
3

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,
)
4

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.

5

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

6

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