On the left is how the bar should look like for every progress value: (fade visible on top) and on the right is how it looks: (fade not visible anymore):
If your progress bar is not on 100%, then the bars size is smaller than the whole component. However to get the effect you want (if I understood you correctly…) you can fake it by using an overlay layout with an image or an inverted progress bar atop. With inverted progress bar I mean you use the gradient as bar image and always set the value to 1 - value of your main progress bar, so the it only covers the top, that the other one doesn’t cover.