Download

Diagonal progress bar, how to make it?

Hello, I would like to create a diagonal progress bar but I haven’t yet found a way to do it. The problem is that while I can create a diagonal image for the progress bar, the “fill” only goes from either “left - right” or “top - down”.

Does anyone know a way how to make the fill go diagonally?

Thank you for your help! I am really lost at this :frowning:

I don’t think you can use unreal’s default behavior for progress bars for this. I think it will be similar to making circular progress bars which you can find a bunch of tutorials on YouTube for how to do that. But basically it involves you editing a material that you apply to the UI and based on the percentage of whatever you are representing with the diagonal fill bar you apply a mask to the material to change how much is revealed.

Put the progress bar at an angle? That should work, no? Or the bar is horizontal and the fill is diagonal? In this case either use a material like suggested above or have the image with diagonal alpha.

Yes, you can simply use an angle, shear, etc, from the “render transform” down in the settings.
You can move it in pretty much any way, even animate the angle of it via widget animations.

^^ Just tried that out, it works…neat trick. Use fill from bottom (or top) depending on which direction you want it to go and use the shear to make it a diagonal bar.