I’ve been trying for a long time to create a rounded loading bar, but all of my attempts have failed. I tried to use a rounded outline with a green bar which fits inside this outline, and tried all of the scale types and clipping descendants, but I can’t make the green bar stay inside the outline completely. Does anyone know a way to make a nice looking rounded loading bar? Help would be greatly appreciated.
9 Likes
Starting with the empty bar ‘base’, you can insert a Frame with clipping enabled, which you scale between no horizontal size and full horizontal size to represent the progress of the bar. Inside that frame you can then put the top layer of the bar which will represent the actual value. The top layer bar should be identical in size to the base layer bar; only the width of the clipping frame should change.
From there, just make the bars rounded using an ImageLabel set to Slice, with a rounded rectangle image . Good luck!
Edit: here’s what the end result may look like:
As you can see, the green bar is flush with the shape of the background layer and clips correctly even at extreme values.
Here’s an exploded version showing the three layers in action:
As you can see, the size of the clipping frame determines the progress of the bar. Since the top layer and base layer are the same shape, the top layer will perfectly cover the base layer when it’s shown. The clipping frame is there to change which parts of the top layer are visible and which parts are hidden.
There are other ways of doing this without a clipping frame, but it’s simpler to understand this way. Hope it helps! 
20 Likes
If I have read and understood this correctly you want to achieve this effect:
https://gyazo.com/6708859b317db9a6addfd77e5ec7de0d
Well firstly what I used to achieve the round bar was use: @Stelrex’s Roundify Plugin: Roundify plugin
You then want to create a bar that has your ideal rounded edges for you. Once doing that, you then place a copy of that bar inside of it, like so:
You then would want to set the “progressBar” size to (0,0,1,0) and the position to (0,0,0,0) so when it moves along the bar it will be the full size on the Y axis.
You’d then want to tween the size using TweenService to (1,0,1,0) in order to move the bar and so it becomes the full size of the bar it is parented to.
Make sure the progress bar is a different colour so you can see it tween! 
Hope this helps. If you have a problem, just message me!
14 Likes
That doesn’t clip correctly at very low values since the width shrinks too far and the slice scale has to decrease to compensate - this is not what he wanted:
You can see this effect in the beginning of the GIF you posted; unless you’re willing to make that sacrifice, there are better ways of doing this that are more visually appealing.
3 Likes
Thank you for this. But I am not completely sure how you achieved this. I followed your steps and still got this result at small sizes.
If possible, could you send an image of the actual setup in explorer and the properties of the frame and image? I would be very grateful.
2 Likes
Sure! Here’s my Explorer setup:
Here’s the Base ImageLabel, just set up as you usually would:
You can position and size it however you like. Nothing crazy about the image settings either:
Inside that, I have a frame called Clipping:
It’s just an invisible frame with ClipsDescendants enabled, and it’s sized to match the current progress. For example, if the current progress is 25%, the size of that frame will be {0.25, 0}, {1, 0}, where the 0.25 represents the 25% as a decimal number between 0 and 1.
Inside of Clipping, I have the final ImageLabel, called Top:
You might notice by the selection box, Top is exactly the same size as Base. I suspect this is the issue with your code. To do this, we need to undo the sizing of Clipping.
This is simple enough! If the progress is 25%, we already know Clipping will have a scale of 0.25 horizontally, so to undo that scaling and get back to full width, we make Top have a scale of 4 horizontally. That’s because 0.25 * 4 = 1. Therefore, 1 / 0.25 = 4, so 1 / progress = the scale of Top!
Using that, we can figure out that, for a progress of 25%, the size of Top will be {1/0.25, 0}, {1, 0}!
So how would that look in code? We can write a function to set the progress of the bar by applying all that math:
local Base = path.to.gui -- change this to refer to your Base ImageLabel
-- Set the progress of the bar
-- progress is a number between 0 and 1
local function SetProgress(progress)
local oneOverProgress
if progress == 0 then
-- since you can't do 1/0 (it's undefined), we'll just make oneOverProgress = 0
oneOverProgress = 0
else
oneOverProgress = 1/progress
end
Base.Clipping.Size = UDim2.new(progress, 0, 1, 0) -- set Clipping size to {progress, 0, 1, 0}
Base.Clipping.Top.Size = UDim2.new(oneOverProgress, 0, 1, 0) -- set Top size to {1/progress, 0, 1, 0}
end
Then, just call that function whenever you like and the progress bar should change! Of course, tweak it to fit whatever use case you may have.
As someone mentioned above, you can also tween the size of the progress bar if you want, just as long as you tween both the sizes of Clipping and Top at the same time, you should be fine!
Hope this helps
85 Likes
Ahhh I forgot about the sizing of clipping! Thank you so much!!
1 Like
Yes. This thread is over five years old, so it looks like the images have been deleted.
4 Likes