Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Question Create animated progress circle?

Discussion in 'UI Toolkit' started by mikejm_, Apr 28, 2023.

  1. mikejm_

    mikejm_

    Joined:
    Oct 9, 2021
    Posts:
    346
    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?
     
  2. RyanCantCode

    RyanCantCode

    Joined:
    Oct 22, 2018
    Posts:
    8
    2021: https://docs.unity3d.com/Manual/UIE-radial-progress.html
    2022: https://docs.unity3d.com/2022.2/Documentation/Manual/UIE-radial-progress-use-vector-api.html

    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.
     
    rawna likes this.