Is there a SMALL Circular Progress Bar that appears decently?

[rogeriodec_games]

I’ve tried some Circular Progress Bar options, but none appear decently when small.

Progress Circle UI Element

It’s great, but it doesn’t work well if it’s reduced in size: [a] See that the edges are indented and the spin colors are different as it spins. CircularProgressBar.rbxl (26.4 KB)

This produces strips:

How to fix these blank strips in this circular progress Gui?

I borrowed the idea from: … and I created my own script for circular progress. The idea is simple: there are 2 frames within which the UIGradiant.Rotation property will be updated: Frame2 (from 0 to 180 degrees) Frame1 (from 180 to 360 degrees) So, for example, if the current progress 75%, Frame2 will be at its maximum (180) and Frame1 will be with 270: [image] However, there’s a visual problem, these blank strips when the rotations are not started (Frame2 = 0 and Frame1 = 180): [image…

This is very thin:

Progress Circle UI Element

Here is an example (albeit not that great looking) of my concept: loading_circle_example.rbxm (3.9 KB)

The ONLY Circular Progress Bar that appears decently when small is the ProximityPrompt.
But this one doesn’t have a script available.

Is there a SMALL Circular Progress Bar that appears decently?

[Abcreator]

Proximity Prompts use this method, I believe:

@Tiffblocks

Addendum: I’ve created a test place that shows how you can do this using current features we have available. It’s pretty clunky, but it is possible. It only requires two textures: One full circle for the background, and one full circle for the progress bar itself.

CircularProgressBar.rbxl (16.5 KB)

[rogeriodec_games]

No.
And it’s one of those cases I mentioned. It works very well when is a large frame, but when small, it does not.

[Abcreator]

I was saying when you said that Proximity Prompts look good that they were more than likely using that system.

[Tiffblocks]

Radial Sprite Sheet Generator for Circular Progress Indicators

I created a web app that lets you generate radial (circular) progress indicators from any source image you give it. This is necessary because Roblox doesn’t support clipping masks for images. There are other ways to make a radial progress indicator, but nothing will match the quality of using pre-rendered images. Since UI elements are locked to integral coordinates, using dynamically rotated segments creates some pretty undesirable results. I’m not the first one to make something like this, but…

I’d suggest trying this, although I haven’t used it myself.

[0xabcdef1234]

circularFill.rbxl (26.9 KB)
I have this example place that should do a circular fill on images with any asset id you want. I tested with most of sizes and textures. You can change the numbers provided in the script or change the assets as described in comments.

It uses clipDescendants as well as 2 gradients with a little offset. You could use similar method but make 2 clipping frame horizontal instead if you want it to start horizontally.

[rogeriodec_games]

I finally managed to achieve a good visual result with a small item.
Thank you.

[rogeriodec_games]

Just one fix: in your example file, you put 0.01 and -0.01 in the UIRadient.Offset.X of the left and right frames. This was causing a time distortion, a brief delay when the bar got close to 50%.
Leaving both offset at 0 fixes the problem.

Edit

Now I understand why I made these offsets. Because of this visual glitch:

So now, I have to make 2 things in the script:

1. One the angle is 0, I have to insert both offsets above.
2. When animating, I have to remove those offsets.