Changing the color of the text if progressbar reaches it

Question

enter image description here

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?

I don't have the html.This is just a screenshot of the psd I will convert to html. — Antonio Papa, May 07 '15 at 08:05
Have you not tried anything? See my and others suggestions below. — JohnDevelops, May 07 '15 at 08:06

score 1 · Answer 1 · answered May 07 '15 at 07:59

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

answered May 07 '15 at 07:59

ImreNagy

511
2
10

score 1 · Answer 2 · answered May 07 '15 at 08:01

1

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?

answered May 07 '15 at 08:01

JohnDevelops

582
3
14

1

Sorry I don't get it :) – Antonio Papa May 07 '15 at 08:07
1

Effectively what has already been said :) See the other stackoverflow questions linked in the top answer. – JohnDevelops May 07 '15 at 08:07

Changing the color of the text if progressbar reaches it

2 Answers2