Change text color if progress indicator is reached

Question

I was asked to make these progress panels, but this seems impossible, because if the progress indicator is <50% it is with color, then it is white. How to make half the text white and half the color if the progress indicator is 50%? What if the progress bar stops in the middle of a number? The only solution I think of is to make the text black, but it may not look very good in design. Any sugestions?

Answer 1

You can use two divs that are located one above the other. One with a frame the other with a progress bar.

Or you read this article.

Answer 2

I would approach this by adding the text inside the HTML (provided that HTML allows it) for the bars, and also save it outside of where it is now.

Using CSS, click the text so that it fits perfectly over the colored text, but stylizes the white color, which gives the illusion of changing the text, but the white text just opens when the strip expands. It makes sense?