Progress Bar Frame

How can I make a progress bar for this UI?

image

Hierarchy:

image

you could use a CanvasGroup and a UIGradient

image

image

1 Like

Will I need to replace the frames with the canvasgroup?

Why not just use a simple image for this?

Anyways what BoneIsUseless meant was to replace the “Frame” frame in your hierarchy with a CanvasGroup and have a UIGradient in said CanvasGroup.

I supposedly did this but my UI looked like this:

image

New hierarchy:

image

1 Like

Before trying with Frames, I tried with image but it didn’t work for me

I used this forum post as a guide:

1 Like

Dont use the transparency property. Just use the color.

I set the CanvasGroup BackgroundTransparency to 0 and it solved the green background problem, but when I resize the CanvasGroup or the Frame named “Vertical” it looks like this:

Normal:
image

Resized:
image

Use images at that point then. There is no fix for that. (There is but it’s so complicated.)

Anyways a trick to fix the issue with images is to use the UIGradients again. Don’t do what that tutorial does.