Custom Progress Bar WITH color change

  1. create a color curve asset:

image

image

edit the curve color to make it change the color from 0 to 1
in this example I set 0 as red and 1 as green

  1. create the material. This is the material I did for this example:

It has 3 parameters: BG COLOR, FG COLOR and PROGRESS. changin progress value from 0 to 1 will wipe between both colors (BG and FG)

  1. create a widget for the bar:

Its just an Image with the material I did.

in the pre construct create a dynamic material instance of the material and set to the bar. Then just add a UPDATE BAR function to update the color and wipe with the Percent Variable.Tag the percent variable as public so it can be accessed from a parent widget as direct parameter. Also add a color curve variable with the initial curve color asset.

Now you can control progress and color just by calling UpdateBar function.

Now create another test widget and drop this one as child widget. Note on the right panel you will have access to the percent variable…if you change it, the wipe and color changes:

I hope this helps.
Good luck! :slight_smile:
Dany