javascript - How to display only part of a background image: linear gradient?

Question

I'm curious nobody asked this question yet:

I'm creating a progress bar as a react component. I want to fill this progress bar with a linear gradient. But I also want to display only the completed percentage of that background-color.

I didn't find how to resolve that. Here is my CSS code:

.ProgressBarContainer{
    height: 24px;
    width: 250px;
    background-color: lightgray;
}

.ProgressBarGradient{
    height: 24px;
    width: 75%;
    background-image: linear-gradient(to right, #a83e4c , #489668);
}

.ProgressBarFiller{
    height: 24px;
    width: 75%;
}

And here is the JS:

const ProgressBar = (props)=>{
    return(
        <div className={classes.ProgressBarContainer}>
            <div className={classes.ProgressBarGradient}>
                <div className={classes.ProgressBarFiller}></div>
            </div>
        </div>
    )
}

Here is what is displayed at the moment

I want, in fact, to display only red as long as I'm under 20% width, And to display the green only if I approach the 100% ..

Answer 1

Thanks to the comment, the solution is to use the 3rd div to hide part of the 2nd div.

.GradientHider{
    height: 24px;
    margin-left:50%;
    background-color: lightgray;
}

And I realize that the first div was useless ..