Is there any way to change the color of text “halfway” through a character on a webpage?

I’ll get you started:

1. Create two equally sized “progress bars” (divs). Set their size to the full width they would be if they were at 100%.
2. Set one bar to black text with a white background and the other to yellow text with a blue background, as per your example above.
3. Set the yellow/blue bar in a parent div and increase the width of the parent on every percentage increase. Position the parent above the black/white bar.
4. Also on every increase, update the labels of both progress bars to represent the percentage.

That will simulate the same effect without having to manually paint half a character. It will be difficult in CSS because you will have to position one over the other.

The benefit of doing it this way is that you can easily display half-painted characters. There is already a jQuery progress bar you can use, though.