Greetings Roblox Devs !
So i have made a Circular Progress Module for every developper that wants to have for example a system of health, reloading, or just for waiting stuff to load.
I’ve watch a lot of tutorials and read community ressources such as this one Circular/Radial Progress who is pretty good if you want to see how it works.
But the problem is, it works with a time number so basically, you give a number of seconds to wait, and it will fill for you.
Here, i wanted a real circular progressing that updates every actions you do.
For example every assets that loads will add a little progression in the circular bar. Or a stamina system like in Zelda breath of the wild or like in Zelda tears of the kingdom.
How do I get it ?
So here is the Roblox model link :
Or to see the code you can check it on Github :
Or you can search “CircularProgressbar Module” on the toolbox and find the paulogarithm one.
How to use the API ?
Before everything, you will need to require the module.
local circularModule = require(script:WaitForChild('CircularProgressbar'))
So here in this particular example, we admit that the module is inside the local script.
Now that we have require the module, we can now create our first circlar progress bar, by using the create method on the circular module.
It must contains at least the Parent of the module, which is a gui object. For example an invisible frame, or an image.
local circularModule = require(script:WaitForChild('CircularProgressbar'))
local frame = Instance.new('Frame', script.Parent)
frame.AnchorPoint = Vector2.new(.5, .5)
frame.Position = UDim2.new(.3, 0, .5, 0)
frame.BackgroundTransparency = 1
local circleObject = circularModule:Create(frame)
In the example above, i’ve created the frame that will be the parent of the progress bar. The progress bar will be centered in it.
The Module:Create method can take multiple arguments :
-
Parent: The parent of the progress bar. It will be at the center of it. It can be any Gui Object such as a Frame, a TextLabel… -
Size: The size of the ring’s circle. The higher the number is, the bigger then ring is. -
Space: The radius of the circle. It’s the space between all dots of the circle. -
Range: The precision of the circle. It’s the number of dots, so the higher number = higher resolution (but it means more dots, so less performances).
Size, Space and Range are optionnal since they have default values, which are 10 for Size, 50 for Space and 75 for Range.
Ok now that you have the circle, it is time to fill it. So there is 2 main uses.
-
By adding or setting values to the progress bar ( The set-add method ).
-
By using flags that will equally fill the circle based on at which flag you are ( The flag method ).
They are both very usefull, and you can use the one you desire based on the use you want to make with the module.
In the set-add, there is basically 2 method functions you will use, chich are Object:Set and Object:Add.
So the circle is basically a representation of a number value, from 0 to 100. When it is set to 0, it’s empty, and when it is set to 100, it’s filled. Here is an example with 14 and 90 :
So the code behind is really simple, after you have created your circle object, you can do :
...
circleObject:Set(14)
circleObject2:Set(90)
The add method will simply add the value to the current one instead of setting it. So basically, you can do
circleObject:Set(7) --> Will be set at 7
circleObject:Add(3) --> Will be set at 10 because 7 + 3 == 10
circleObject:Add(-7) --> Will be set at 3 because 10 + (-7) == 3
Note that the value can be higher than 100, but it will be visible as filled. Same thing if its lower than 0.
Also Note that the circle beggin with the value of 0, so doing
Object:SetorObject:Addat the beggining will do the same.
Flag Method is a little bit complicated to understand. You will first need to set an end flag, and then the circle will fill automatically each time you flag equally. Here is an example :
circleObject:SetEndFlag(4)
circleObject:Flag() --> Will be set at 1/4 == 25
...
circleObject:Flag(3) --> Will be forced set at 3/4 == 75
...
circleObjec:Flag() --> Will be set at 4/4 == 100
Note : Flagging after the end flag will cause a warning, but nothing will happend.
Here is an example of using the flag in a real case.
local circleObject = circularModule:Create(parent, 30, 40, 100)
--> There will be 7 steps to my project
circleObject:SetEndFlag(7)
task.wait(.5)
--> The circle is now filled at 1/7, the First step
circleObject:Flag(1)
task.wait(.5)
for i = 1, 3 do
--> The circle is now filled at 2/7, then 3/7 and then 4/7
circleObject:Flag()
task.wait(.5)
end
for i = 1, 3 do
--> This will only accomplish the 5th task, so circle is filled 5/7, 3 times
circleObject:Flag(5)
task.wait(.5)
end
--> The circle is now filled at 6/7
circleObject:Flag()
task.wait(.5)
--> The circle is now filled at 7/7, the Last step, circle is full
circleObject:Flag(7)
This looks pretty much like this :
You can also set the circle color, with the fill and the empty colors. It will be green and white by default.
To set the new color, you can simply use the Object:SetColor method, with a dictionnary containing Color.Fill and Color.Empty.
Object:SetColor({
Fill = Color3.fromHex('#ff0000'), --> For red circle fill
Empty = Color3.fromHex('#000000') --> For black color empty
})
At the beggining, i talked about Zelda Breath of the Wild stamina system. That’s why I recreated it here :
And if you can’t or don’t want to play the experience, here is a video to show how it looks like.