Gradient progress bar color by value

[Mert_Arda_Asar]

Summary

Hello, I want to change default progress bar color with gradient color (red to green). I added some markdown codes you can see below. But using this way, my progress bar always ends at green. If the value I give is low, I want the color to stay in red tones. How can I solve that?

Steps to reproduce

Code snippet:

st.markdown(
    """
    <style>
        .stProgress > div > div > div > div {
            background-image: linear-gradient(to right, #C10505, yellow, #15FF0D);
        }
    </style>""",
    unsafe_allow_html=True,
)
progress = st.progress(15)

Expected behavior:

When I run this code, I expect it to become red

Actual behavior:

[edsaac]

Not an answer here, just a clue. A progress bar is just a x-translated div, for instance, a progress bar of 20% is drawn as that default blue div affected by a transform: translateX(-80%);. Notice in the screenshot that the div representing the progress bar has a full size, but only the right-most 20% is visible after the translation. That’s why you only see the green part of the gradient, because it always correspond to the right tip of the div: