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 greater than 100 (less than 0), it will stays at 100 (0). So it doesn’t affect Circular Progress.
Those things is placed inside LocalScript, but LocalScript is placed inside Percentage value (Progress > Percentage > {LocalScript} > {All options}).

Circular Progress:

Give it a try and send a reply, I’m pleased to hear that from you.


Thanks to @Sensei_Developer for making a Module, you should check it out too:

352 Likes

When I first did this (way back when), it was a technical challenge and there were next to no guides on how to do it. Today, thanks to you and a few others, resources are rapidly being made available.

Nice work. Thanks for sharing.

13 Likes

Thanks, this will come very useful : )

1 Like

Hi.
The image failed to load in my game, can you send the image please?

Thanks

4 Likes

Thanks! I just saw this but Ill be using this for the game I am working on. Also this can be used for a game if say you want to equip something OR a first person shooter if you want to steady the weapon.

I couldn’t open the file, and even after I set the roblox studio to open it I can’t seem to load the place. Oh well.

Thanks, I’ve been needing a good looking loading icon fr a while now!

It isn’t a place file, it is a Roblox Model file. Just drag the file into studio and it should work.

Thanks I didn’t realize the file type was for models.

This is really going to be useful, right now I’m currently in the process of making a alternative health bar based on this (I even went as far as using the health color change function used in the old top bar health GUI, so it’ll change color depending on how much damage you took).

It’s not really ready to be shown yet, I need to iron out some bugs, notably because I had to do some mathematic black magic to get a percentage of your current health (so you can set your character’s max health).

For reference (or those trying to achieve the same thing) here’s the formula I had to use:

local Humanoid = path.to.your.characters.humanoid -- Obviously, replace this with the actual path to your character and its Humanoid, I like to use ":FindFirstChildOfClass("Humanoid")" in these instances, so you don't have to deal with the humanoid object's name. 
Humanoid.Health / Humanoid.MaxHealth * 100

Also had to run it through math.ceil() else the script would act a bit odd.

EDIT: Attached it here, but beware, my code is a veeeeeerrrrrryyyyy rough draft, I have designed it so it can be removed from it without any problems.
RoundHealthBar.rbxm (11.3 KB)

Edit: not to be pedantic, but I noticed when the bar is at 0, there’s two faint lines on the top and bottom, it’s not really a deal-breaker but it’s a small detail that I noticed.

8 Likes

Image failed to load. How do i fix this?

1 Like

The image should load in when you test the game

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!

image

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)

7 Likes

This is cool!
Thank you so much :slight_smile:

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. :heart:

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