Edit History

Ah, an elegant solution. Foating the bar on the right works much better.

The text is a little annoying of course but you could A) not use text at all - you don't 100% need it or B) you could just center the text no matter the size of the bar.

Or you could have the text outside the bar if you like, but being able to essentially 'count down' with the gradient background is nice.

I might play with adding 'pips' to the bar. If you use the text to add X amount (say X/10) pips and count down, then the pips show what percentage its at and they disappear as the bar shrink, showing you the numerical value of the bar in a visual way. And you can just delete the pips as needed instead of worrying about layering over them

Ah, an elegant solution. Foating the bar on the right works much better.

The text is a little annoying of course but you could A) not use text at all - you don't 100% need it or B) you could just center the text no matter the size of the bar.

Or you could have the text outside the bar if you like, but being able to essentially 'count down' with the gradient background is nice.

I might play with adding 'pips' to the bar. If you use the text to add X amount (say X/10) pips and count down, then the pips show what percentage its add and they disappear as the bar shrink, showing you the numerical value of the bar in a visual way. And you can just delete the pips as needed instead of worrying about layering over them