How to customize the top of a progressbar?

Hi,
I want to customize the top of my progressbar. I made a material that blends the top over but how do I apply that for every progress value?

This is my material:

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):

123344-unbenannt.png

How do I fix that?

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.