Progress bar with Image as a background

I have been using my custom widget for this, but I figured there might be a better way.
Basically, I have this widget:


This widget is a progress bar with image background, where the bar exactly matches with the given part of the image.
I cannot use margin/padding for this because they would require fractional pixels.

It feels like I am over-engineering using custom widget for this. Is there a better way?

Think I might need to specify more details, but have no idea which details to fill in…
Well let me ask this: what is the best practices on creating UI, in terms of grouping widgets and making custom ones?