Gui circle progress bar

[pug6_4]

Any way to fill up a circle gradually like a progress bar.
not around it, like a radian thing but just it fills up from the bottom

[Dan_foodz]

You can use Union:

1:

2:

3:

and so on.

Hope this helped

[WingItMan]

Literally the first result when I searched for a solution first…

Rounded circular / radial progress bar

[Artboard 1] ProgressBar Version 1.2 Get Module Download Place Introduction Recently I’ve been looking at scripts that make circular progress bars, but their design wasn’t appealing to me. So I’ve decided to make my own module for making circular / radial progress bars! This module was based on AstrealDev’s Radial Progress Bar module: How do you use it? To change the fill of the progress bar you need to either edit the rotation property or the progress property. (Ro…

Please don’t write unnecessary topics without doing some work yourself.

As for your request for bottom to top progress bar.
You could use a square progress bar, and add rounding objects.

[Dan_foodz]

Oh, wait, you want a Gui, Not a part, Sorry, XD

[Scottifly]

I had the same thought, but they are asking for a bottom to top fill.

[Citrozi (Citro)]

You can use TweenService and tween a Gui circle, you can add a Ui Corner to the Gui to make it circular.
TweenService
UICorner

[pug6_4]

Thank you for replying this, although you aren’t correct i’ll help you understand.
I want a circle to fill up, not around it, inside.
“not around it, like a radian thing”
I have searched atleast 20 times for your information, and i found two posts but they didn’t provide a soloution.
Edit: I want to mention that i’ve already seen that post but it does not give me a soloution, as i said i did not want it to be a radial progress bar.

[pug6_4]

Wouldn’t work, when tweening the size it wouldn’t just cut the circle it would make it a cube.
Already tried this, and clipdescendants is out of the table considering it doesn’t work with anything but cubes.

[Citrozi (Citro)]

Maybe these posts can help out

Progress Circle UI Element

Imagine having a normal progress bar – except it goes up instead of to the right: [Bar] Then, imagine turning both the progress bar (blue) and the ‘scale’ (light grey) parts into images: [Orb3][Orb4] @Tiffblocks Oh yeah, I’ve never thought about that

Progress Circle UI Element

You can actually do this with rotation by using the ImageRectOffset/ImageRectSize properties - ClipsDescendants isn’t strictly necessary for this case.

[pug6_4]

oh wow, didn’t see these when searching, thank you, i’ll check em out.
Edit: Was not what i was looking for, thanks tho.

[NyrionDev (Nyrion)]

As long you’re using a background(non-transparent) it can be realistically faked. Basically you have to create a frame on top of the circle, with the same color as the background, then scale that frame to hide/unhide the circle. I made a script that does this for assets being preloaded(it can be modified for other uses as well):

local ContentProvider = game:GetService("ContentProvider")
local TweenService = game:GetService("TweenService")

local UI = script.Parent 
local Background = UI:WaitForChild("Background")
local Circle = Background:WaitForChild("Circle")
local HiddenBox = Circle:WaitForChild("HiddenBox")

local preload = {}

--loading random thumbnails
for i = 1, 200 do
	table.insert(preload, "rbxthumb://type=Avatar&w=100&h=100&id=" .. math.random(1,1000000))
end

local preloaded = 0
ContentProvider:PreloadAsync(preload, function(id, success)
	preloaded += 1
	--assets loaded/total assets
	local Y = preloaded/#preload 
	--1-Y because we want the hidden frame to shrink every time an asset gets loaded(to reveal more of the circle)
	HiddenBox.Size = UDim2.fromScale(HiddenBox.Size.X.Scale, 1-Y)
end)
print("done")

The object hierarchy used on the above example is the following:

And here’s the entire thing:
CircleProgressBar.rbxm (3.8 KB)

[pug6_4]

Thank you, but this wouldn’t really work if the backround was the workspace right?

[hintsystem]

I copied your code but used gradients instead (allows you to show workspace)

local ContentProvider = game:GetService("ContentProvider")
local TweenService = game:GetService("TweenService")

local UI = script.Parent 
local Circle = UI:WaitForChild("Circle")
local Gradient = Circle:WaitForChild("UIGradient")

local preload = {}

--loading random thumbnails
for i = 1, 200 do
	table.insert(preload, "rbxthumb://type=Avatar&w=100&h=100&id=" .. math.random(1,1000000))
end

local preloaded = 0
ContentProvider:PreloadAsync(preload, function(id, success)
	preloaded += 1
	--assets loaded/total assets
	local Y = preloaded/#preload 
	--1-Y because we want the hidden frame to shrink every time an asset gets loaded(to reveal more of the circle)
	Gradient.Offset = Vector2.new(0, 1-Y)
	--Gradient.Offset = Vector2.new(0, Y) - this will start from top and empty out instead of filling up
end)
print("done")

The GUI hierarchy

A clip of it in action

Baseplate world to try it:
CircleFill.rbxl (35.2 KB)

[pug6_4]

amazing, ilysm. I’ve been looking for something like this for a long time for a cooldown system, not really a game loading screen but this helps anyway.
Edit: Do you know by any chance how i would do this without the game loading?
currentCount/MaxCount? i would suppose.

[hintsystem]

You could tween it instead

local TweenService = game:GetService("TweenService")

local UI = script.Parent 
local Circle = UI:WaitForChild("Circle")
local Gradient = Circle:WaitForChild("UIGradient")

wait(1)

--Fills up
local TweenInf = TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
local CircleFill = TweenService:Create(Gradient, TweenInf, {Offset = Vector2.new(0, 0)})
CircleFill:Play()

CircleFill.Completed:Wait()

--Depletes
local CircleFill2 = TweenService:Create(Gradient, TweenInf, {Offset = Vector2.new(0, 1)})
CircleFill2:Play()

Place file:
CircleFill.rbxl (34.9 KB)