Dang it. I just managed to do the same thing using ViewportFrames containing invisible blocks adorned with half-circles. I didn’t think about using rotated gradients!
Oh well. Time to adapt.
6 Likes
This is still a pretty cool concept case for Viewports, yours could also have its own topic.
3 Likes
Here’s the file. I’ve also added a second meter that uses the gradient method.
RoundProgressMeter.rbxl (27.7 KB)
6 Likes
This is cool!
Thank you so much 
Wow, this is truly amazing. I was previously looking for something like this, but was unable to find anything. Thank you!
Hello there again,
It’s been so long now without any new features. At this time, I feel I can add it to Circular Progress now;
What’s new?
- Starter Point is only on Top, which is boring. So I decided to allow to change Starter Point where Progress should go.
- There are only 2 direction for Progress to go. I added a “Middle” direction; both side will run at same time while keeping Percentage right.
What changed?
- In the previous Circular Progress, a script still run without changing Percentage. That caused really bad performance. In this Update, the script will now only run when Percentage is changed or Property of Value in the script is changed.
- Flip Progress Value now changed to String Value and named “Direction”.
Circular Progress.rbxm (7.5 KB)
If you want to ask something or have a feedback, don’t forget to reply. That really help me.
Thanks for testing, and stay safe. 
Image doesn't appear while editing.
For some players who asking that Image isn’t loading in Studio: when you change Image ID in script, it will appear when you run the game, but if you want to change the image you want while still in editing, go to both Frame and change ImageLabel Id
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.
Why is the Progress keep changing?
Open script, to go line 140 and delete all text from 140 to 145 and the Progress will stay still.
I can't open this file.
This is a Roblox Model file, drag it into Roblox Studio and it should be there.
20 Likes
This is definitely a very smart use of UiGradients, saved me from creating sprite sheets for radial images. Thanks a lot for sharing this!
2 Likes
circular progress module.rbxl (29.4 KB)
Hi guys!!!
I’ve noticed this post, and I’ve decided to expand further on it and make it more modular, just for you development needs!
In the attached .rbxl file, you’ll find a modulescript, and a temporary “requirer” localscript in it, just for demonstration purposes.
Feel free to use the module all you’d like!
5 Likes
Thank You, this has honestly helped me learn something I didn’t know
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
Hey, I’ve been trying to use the circular progression and it isn’t working. Any reason why?
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.
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.
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?
This is really nice! Thanks for sharing this with us. We’d really love to use this in the future. 
How would I be able to change it in a BillboardGui?
2 Likes
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
You can simply transfer what is inside of the Radical Progress UI and move it into the billboardui of choice.
Does that help?
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
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