Create animated progress circle?

Is there any practical way to create an animated progress circle similar to this:

Or even more simply something like this:

Because if you have a basic “pie” progress indicator you can overlay something to mask the parts you don’t want and roughly get the original.

Any solution for this?

2021: Unity - Manual: Use Mesh API to create a radial progress indicator
2022: Unity - Manual: Use Vector API to create a radial progress indicator

Normally (in CSS aka USS) you’d use conic-gradient or a rotated clip: rect, but afaik Unity has not implemented those two CSS values so the above methods are the best way.

It’s pretty complicated compared to UGUI (even if you require that rounded edges look):
Non-Rounded Edges:

Rounded Edges:

Someone will likely have to make a framework to make this easier, kind of how “Bootstrap” exists for CSS, otherwise a lot of game devs are going to have to learn HTML/CSS concepts… Which is not practical.

Hope this helps.

1 Like