Circular Progression Module! For all your UI needs!

[Sensei_Developer (Sensei)]

Hey guys! Sensei is back at it again!!! :)))

Recently, I’ve been seeing a lot of developers struggling to make their own circular progress UI, let alone make it compatible with their systems.

No need to fear! I have come down with a beautiful new ModuleScript that can help you make your very own radial progression UI, easy peasy!

Circular/Radial Progress

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 Percenta…

MAAAASSIVE thanks to this guy, he basically made the entire script of it, but however, it was a very messy script, and so I decided to make it into a modulescript.

Here’s an example place of the module in action:

API

module:GenerateProgress(float seconds)

Creates a progression UI element

module:CancelProgress(void)

Cancels the current progression UI element, and completely resets it.

And of course like everything in here, it’s open-source, meaning that you can take a look inside and see how it all works!

Again, massive thanks to @Predalisa for making the base code!

EDIT: It appears that the tradition of refining code has continued, and I’d like to redirect you to a much more advanced version of mine over here:

Circular/Radial Progress

Hello, Recently, I made a Model which could be useful to most games. Yep, you read the Topic, it’s a Circular Progress. Simple and fast, so I decided to share it. [Circular] I made all necessary things for Circular Progress, such as: Allow to change Color and Transparency of each part. Can be used with any Decal. Can change Circular Progress direction. To make Circular Progress work, you only need to change percentage between 0 and 100. You can also use tween on percentage. If it is great…

[OminousVibes0 (OminousVibes)]

Do you mind posting the module, please? I’m unsure how I’m supposed to use it.

[redJuli21 (nil)]

A few days ago I was trying to make my own Material Design Spinner frame by frame and it was working fine until Roblox decided to moderate the images for some reason so I just gave up on it.

[Sensei_Developer (Sensei)]

Download the .rbxl file in the post, and then go to the startergui, and find the module. You can adjust the variables inside of it to adjust it to your UI.

[MaloniPepperoni (Maloni)]

Looking through the post it appears that the place file isnt linked anymore. Do you think you can update it with a new download?

[Glitchifyed]

the rbxl place file has seemingly vanished. can you please put it back?

[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.

[Channy97]

Hey! It seems there’s an error with this module when it passes the 50% mark. Any idea how to fix this?

[Darkvsx (Disturbed)]

In the example you just had to remove the last line.
progress.rbxm (10.3 KB)

[Brylan_Leske (Brylan)]

Frame by frame is a terrible way to do this, use tweens & uigradients.

[GalladeR475 (glaphyre)]

This is a common issue found in most proximity prompts/radial progress bars where there is a visible slit at the foot or the head of the UI. This has nothing to do with the module because the module only handles the “behavior and logic” of the progress.
I didn’t modify any part of the UI, I just used the one provided in the old module by @Predalisa.