Changing the color of the text if progressbar reaches it [duplicate]

Question

I was asked to do these progressbars but It looks impossible to make them because if the progressbar is < 50% it is with a color then it is white.How to make half of the text white and half with a color if the progressbar is it at 50%?What if the progressbar stops in the middle of a number? The only solution that i think of is to make the text black but it might not look good in the design. Any sugestions?

Answer 1

You could either use two divs that are placed above each other. One with the frame the other with the progress bar.

Or you read up on this article

Answer 2

I would approach this by adding the text to inside the HTML (assuming the HTML allows for it) for the bars as well as keeping it outside where it currently sits.

Using CSS then push the text so it sits perfectly over the coloured text but styled white so it gives the illusion of the text changing but white text is simply being revealed as the bar extends. Does that make sense?