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.
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.
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.
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.
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).
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.
You can actually do this with rotation by using the ImageRectOffset/ImageRectSize properties - ClipsDescendants isn’t strictly necessary for this case.
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):
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.
