Progress Circle UI Element

[PhoenixSigns]

A common UI element that games and apps outside of Roblox use to demonstrate loading progress is a progress circle. Right now, the only way to achieve this effect in Roblox is through the use of sprite sheets which is not as accurate nor smooth as a real progress circle, and quite a hassle to implement.

An addition of this UI element would allow developers to easily include this in their games and in turn, provide a better experience for players.

If you aren’t sure about what I’m talking about, here’s an example picture.

[presssssure (paige)]

@evaera made a really good webapp and module for this https://devforum.roblox.com/t/radial-sprite-sheet-generator-for-circular-progress-indicators/136282

[PhoenixSigns]

That works for DevForum members, but many don’t have access to resources like that. Anyway, there are always hacky ways to achieve a desired effect, but a feature like the progress bar is so fundamental and common that it should have an official implementation.

[Tiffblocks]

A really simple workaround right now is to just use a different type of progress bar than a radial one. Most of the time, a simple spinner is easier to implement and provides the same utility to the end user of indicating responsiveness during the operation. Most circular progress indicators are only used for a few seconds at a time before the operation completes, otherwise a more heavy bar like the traditional linear one is used instead.

We probably won’t directly built a circular progress bar into the engine, because we’d rather ship features that can be used to implement this and many other things like it rather than for just one thing. We will be looking into use cases like this later this year though.

[PhoenixSigns]

Yep, I’m using a linear progress bar for now, which doesn’t look as good but gets the job done.

Can’t wait for the new features though!

[BayesBot]

You can do this: Have an image of a circle that is at “0%”, and only display one half of it. Then have an image of a circle that is at “50%” that is a layer behind the empty circle. Then just rotate that 50% circle. And then, finally, you can have a “full” circle, but only use half of it, initially overlay it completely on the 50% circle, and then just rotate it.

[EmeraldSlash (Rio)]

If you want something more unique, you can try doing what some other games do and have a single element that functions like a linear progress bar but appears in a way you want to. A linear progress bar – but it’s an image, giving you more room to customise.

For example (since I can’t find anything on the internet because I can’t figure out the right search term), imagine having a glowing image be slowly unmasked (similar a linear progress bar).

This image could be anything – a glowing orb, shards of something, a knife, etc. and the image could be unmasked in whatever direction you wanted.

I wanted to figure out how to do this in my design software so here’s a version I made:

The glowing orb is currently 50% full, and so the top half is still being masked (with a nice image underneath so you can see how far away 100% is).

This doesn’t just apply to circles - you can do it with any image (as long as it’s not rotated, otherwise ClipsDescendants won’t work – which is what you’ll use to do the masking).

[PhoenixSigns]

Ohhhh, that’s a neat way to do it.

[PhoenixSigns]

I’m not quite sure what you mean. Can you explain it in a different way?

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

Edit (July 2021): There’s a better way to do this now, using UIGradient, which doesn’t have aliasing or pixel rounding artifacts.

Is there a SMALL Circular Progress Bar that appears decently?

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.

[Tiffblocks]

You can actually do this with rotation by using the ImageRectOffset/ImageRectSize properties - ClipsDescendants isn’t strictly necessary for this case.

[EmeraldSlash (Rio)]

Imagine having a normal progress bar – except it goes up instead of to the right:

Then, imagine turning both the progress bar (blue) and the ‘scale’ (light grey) parts into images:

@Tiffblocks Oh yeah, I’ve never thought about that

[PhoenixSigns]

Ah, I see what you mean now. Thank you!

[BayesBot]

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

[rogeriodec_games]

It’s great, but it doesn’t work well if it’s reduced in size:

See that the edges are indented and the spin colors are different as it spins.

CircularProgressBar.rbxl (26.4 KB)

[metatablecatmaid (metatablecat)]

I know its a bump (and im late) but something similar to this was done with the ProximityPrompt Gui quite recently.

I wonder if its more feasible to do it now since we have stuff like UICorner

[iGottic]

You do not need to use sprites to achieve this. I’ve created my own loading circle, shown in the first few seconds of the video below (both before and after the intro):

Early CALIBER Alpha Gameplay

I achieved this by having a single image that spins using RunService. The coloring is done by having a UIGradient rotate the opposite direction.

So, in a sense, it’s a lot more simple than you may let on.

If you want a circle to fill, then also use UI gradients.