Hello everyone!
In this brief tutorial I will explain how to get a loading bar/health bar effect like these:
And
HOW TO CREATE ROUNDED LOADING BAR
Firstly, create a Frame called “FrameBase”. Put a UICorner in it to make it rounded. Change the BackgroundColor3 to whatever color you want.
Next, insert a Frame called “Clipping”.
Set these properties on this clipping frame:
Now, insert another Frame into the clipping frame and name it “Top”. Make sure to put a UICorner in it to make it rounded.
Set the top frame’s size to {1, 0, 1, 0}. Change the BackgroundColor3 to whatever color you want.
If you did everything correct, the whole thing should look like this:
Now all that is left is the scripting! Scroll down to the very bottom to see what to do for that.
HOW TO CREATE AN IMAGE BASED LOADING BAR
Firstly, create an ImageLabel named “ImageBase”. It is recommended to change the ImageColor3 to a darker color so you can see the difference between the two images at the end.
Next, insert a Frame called “Clipping”.
Set these properties on this clipping frame:
Now, insert another ImageLabel into the clipping frame and name it “Top”.
Set the top ImageLabel’s size to {1, 0, 1, 0}.
If you did everything correct, the whole thing should look like this:
All that is left to do is the scripting! Scroll down to the very bottom to see what to do for that.
SCRIPTING PORTION
So before doing any scripting, if you were to adjust the size of the Clipping frame (the size ratio is 0.7 here for example), you would get a very weird result:
In order to make it scale correctly, all you have to do is set the size of Top frame to 1 / ClippingSize. Upon doing so will make it look like this:
Fortunately, there is a handy function that will do it all instantly 
function resizeCustomLoadingBar(sizeRatio, clipping, top)
clipping.Size = UDim2.new(sizeRatio, clipping.Size.X.Offset, clipping.Size.Y.Scale, clipping.Size.Y.Offset)
top.Size = UDim2.new((sizeRatio > 0 and 1 / sizeRatio) or 0, top.Size.X.Offset, top.Size.Y.Scale, top.Size.Y.Offset) -- Extra check in place just to avoid doing 1 / 0 (which is undefined)
end
In order to change the size of the bar, all you have to do is call that function, like this:
local healthRatio = currentHealth / maxHealth -- the ratio of the bar to be set
resizeCustomLoadingBar(healthRatio, HPBarClipping, HPBarTop)
That’s it!
If you have any questions, feel free to ask, and I hope you enjoyed the tutorial! 
– Moonvane
