Changing each progress bar to different colors

[Bokime]

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?

Thank you!

[Ata]

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

[BeyondMyself]

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

[Bokime]

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.

[effe]

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