Circular/Radial Progress

[b_oomy (THE IRS)]

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

[Edwi_P]

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.

[ResumavoidDev (Resumavoid)]

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.

[Sensei_Developer (Sensei)]

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?

[Obsentiel (Albert)]

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

[kirby00004 (benz)]

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

[Minecrablox]

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.

[Minecrablox]

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

[KapokPanda]

@Edwi_P

Why there’s a line when I change screen size?

this happen when Circular Progress Size is in an odd number. Well, an even number can be divided by 2, but odd number leaves with 1 pixel, and that’s why it happens. To me, it doesn’t matter at all.

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.

[Dev_Skylab (Skylab)]

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

[D13_cxq (zx2x)]

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

[GalladeR475 (glaphyre)]

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.

[towerscripter1386 (Tower)]

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)

[Lord_BradyRocks]

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

[towerscripter1386 (Tower)]

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

[memeason]

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

Creating a radial/circular gauge GUI with A-Chassis

Do you have any ideas on how to use A-Chassis Tune V6.43S with this dash to create a radial/circular speedometer? This is kind of what I am going for: [Dash_Mockup] And this is what I have: [Dash_Current] I have tried getting Frames with UICorners and then using UIGradients with scripted transparency sequences, however, it doesn’t really work and I don’t like the look. I am basically using lines 238-241 of the AC6_Stock_Gauges script script.Parent.Parent.Values.Velocity.Changed:connect(…

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

[sozzly]

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:

(Progress=0)

[Xaoijin (Jinsu)]

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

[DIYDamian]

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

[ldkbro01 (TheSlayer)]

bro I KNEW IT that it was made out of both image labels with UIGradients!!!