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.