Change the progress bar background color

[Durga_Prasad]

Hello all!

i want to change progress bar turn to green and empty turn to red, below code is working fine for progress bar to green but i need blank (grey) to red.

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

[tonykip]

Hi @Durga_Prasad,

Thanks for posting!

You need to modify the CSS for the specific class or element that represents the empty part (grey) of the progress bar.

Here’s the updated code from the one you provided above to add the red:

st.markdown(
    """
    <style>
        .stProgress > div > div > div > div {
            background-color: green;
        }

        /* Style for the empty part of the progress bar */
        .stProgress > div > div > div {
            background-color: red;
        }
    </style>""",
    unsafe_allow_html=True,
)

It will look like this