Ability Cooldown Image Sizing

[tekoolll (tekool)]

Hey, devs! I’m making an ability UI, but the problem is that the progress bar image slowly gets smaller. I am using the crop image type, and I’m trying to recreate the ability cooldown from slap battles (gif). My version is on the left. Any help is appreciated.

[Mateufil (Mate)]

Try to set the image ScaleType to Tile and then set the TileSize to some value using offsets, for example: {0, 50},{0, 50}

[RainingMemory (nat)]

i think you should use the gradient transparency trick!

you can reference this topic post which explains it in detail:

How to make Rounded Gui progress bar

A lot of people, which tried to do bars, which visualise your health, stamina, durability of item and etc. on Roblox receive this problem: [image] End of green bar is RoUnDeD!?! But blue one isn’t. So, I’ll tell you most simple way to fix this. You need to prepare your progress bar: make background. In my example it dark red make display “frame” inside it, and set it’s size to {1, 0}, {1, 0} add UICorners to both of them [image] Now, I need to say you that you DON’T need to change disp…

it will not have the rounded edge, and makes sure the texture does not warp!

[Omnipotent_Corrupted (red)]

Use Canvas group for something like that. Canvas group is somekind of a group of elements inside the UI. Make the decrease bar 1,0,1,0 so it fills the container completely. If you want any more help ping me

[tekoolll (tekool)]

it worked exactly like the gif, tysm!!!