Progress bar design with text overlay

I have a progress bar in my app where I want to display the amount done with a text overlay.

What I have is the text overlay begin centered in side the amount that is done so it looks like this

The problem is when the user hasnt done very much it looks like this (it should be 17/100, not 17/10 as is showed) but gets cut off

The other design alternative would be to always center the progress text, but then when the user is halfway done I going to run into the issue where part of the text is highlighted and part isnt which I think will look weird.

Should I make it so that even when the user has a small number complete to show more than the actual percent so they can see the whole number?

Or what are other design options