How to create an animated edge for a progress bar?

Grimnir is correct, but I’d like to clarify a few things. A material does not support pixel space. Everything you calculate there is in UV space, meaning anything added “at the end” would stretch as the bar fills.

The extra image widget added (the image shown “at the end” of the progress bar) can be of a fixed pixel size since it’s a widget. The progress bar reports its fill percentage, and the widget geometry of the progress bar widget is known (it’s size and position in pixels).

You get a few options to position the image on top of the bar. Both as direct child elements of a canvas widget for example, then set the position directly on that canvas slot. That canvas widget is directly placed on a UserWidget asset, and can communicate the % of its progress bar as position for its image widget.

1 Like