Circular/Radial Progress

Resources Community Resources
#22

Since I see people still coming to this post since it’s one of the best resources around I made a module to make it significantly easier to create radial progress bars. I know someone already made one but I would hardly call that useful. You can find the module here. I included an example script that shows how to use it. All methods:

RadialObject <- RadialModule.new(Frame imageObject, string imageId, table options)
void <- RadialObject:Update()
void <- RadialObject:TweenProgress(number newProgress, number tweenTime)
void <- RadialObject:SetProgress(number newProgress)
8 Likes
Circular / Radial Progress Bar [Rounded]
#23

Hey, I’ve been trying to use the circular progression and it isn’t working. Any reason why?

#24

Can you show me more detail why it happened?

These may solve the problem:

  • All frames are visible and in correct position.
  • Available image ID.
  • Percentage is not in 0%.
  • All transparency property in option is not 1.
#25

I know I’m late but this is exactly what I’ve been looking for! Thanks you, you saved me. I’ve been searching for this for the past two hours.

#26

Uh, did you properly give credit to me? Because other than the post you linked, I don’t see any credit being given to the guy who made the base code and me who adapted it into a module

Or I could be wrong, perhaps you made it first without me knowing?

#27

This is really nice! Thanks for sharing this with us. We’d really love to use this in the future. :happy1:

#28

How would I be able to change it in a BillboardGui?

2 Likes
#29

Hello,

As you may know that performing durations would be a doozy.
For example, you wouldn’t be able to customize the thing to be 30 seconds instead of 5.
Before you start stressing out, I managed to add a proper and very accurate duration (in seconds) setting in the script. Take a look.

local Duration = 5 --In seconds

local Length = Duration * 30
local CL = 0

repeat wait()
	CL += 1
	script.Parent.Value = CL/Length * 100
	-- Progress.
	local PercentNumber = math.clamp(script.Parent.Value * 3.6,0,360)
	local F1 = script.Parent.Parent.Frame1.ImageLabel
	local F2 = script.Parent.Parent.Frame2.ImageLabel
	F1.UIGradient.Rotation = script.FlipProgress.Value == false and math.clamp(PercentNumber,180,360) or 180 - math.clamp(PercentNumber,0,180)
	F2.UIGradient.Rotation = script.FlipProgress.Value == false and math.clamp(PercentNumber,0,180) or 180 - math.clamp(PercentNumber,180,360)
	F1.ImageColor3 = script.ImageColor.Value
    ...
until CL/Length * 100 >= 100 --percent

If you customize the “Duration” variable, you are customizing the number of seconds that the loading circle can last.

Ps: This is not the ENTIRE script, just the segment that was changed.

1 Like
#30

You can simply transfer what is inside of the Radical Progress UI and move it into the billboardui of choice.
Does that help?

#31

I found a way to solve this. I changed this line:

F1.UIGradient.Rotation = self.Config.FlipProgress == false and math.clamp(PercentNumber,180,360) or 180 - math.clamp(PercentNumber,0,180)

to:

F1.UIGradient.Rotation = self.Config.FlipProgress == false and math.clamp(PercentNumber,179,360) or 179 - math.clamp(PercentNumber,0,179)

It is much easier to understand why this is happening when you temporarily put some space between Frame1 and Frame2 for debug purposes and then tweak the gradient’s rotation value on Frame1.

1 Like
#32

I am trying to put another Image ID that’s less thick than the original one. When I changed it, the whole GUI disappears. Anyone knows why?

New Image ID: 4565400218

1 Like
#33

With the help of a plugin I switched from screenui to billboardgui , but it does not work.

#35

Hello there, I know it’s been a year since this module came out, but this was helpful for me trying to make one from scratch.
I’ve been so grateful for this system, that I decided to revamp the whole module to provide type-checking and added documentation to functions that don’t have them.
progress.rbxm (9.7 KB)
EDIT: Made changes based on previous replies. Re-added the file.

3 Likes
#36

Just as I looked into the source code, I got a stroke, so I reworked it, and now it’s more efficient and optimized! It uses the “TransAndColor” missing part type in a technical way since I removed the original “MissingPartType” property due to it’s questionable usability. It doesn’t use values and instead uses attributes for efficiency.
ProgressCircleNew.rbxm (8.1 KB)

#37

Hi,
When I run your model, I think perhaps I do not have access to your image ID. Is there a public ID that can be used to see it working?

Thanks

image

#38

input any circular image, and it will work just fine! (in script’s attributes)

#39

This is a great resourse, but is it possible to make a car gauge similar to this post:

If it is I’m confused on how to do it as I’m not a UI Scripter or any sort.

1 Like
#40

I apologize for bumping. I feel this is important:

If anyone has the issue where a pixel of the image is being shown when Progress=0 or Progress=1, you can set the UIGradient rotation for Frame1 and Frame2 to 0.01, 0 and -0.01, 0 respectively. I have yet to use this fix in a live game, so I’m unsure if there are any issues, so be cautious.

The issue in question:
vmBFXjO
(Progress=0)

1 Like
#41

Oooo. it works, Thanks, and I don’t believe there will be any issues.

1 Like
#42

I know this is years old by this point but this is such a clever solution to getting this kind of ui