Create spinning throbber.

There are spinning throbbers or progress bars available in the UI toolkit yet. Something like this:

So I was trying to create my own one. I created a throbber image and added it is a background to a visual element. I managed to add a updating function to my visual element that would update the rotation of the throbber.

After having written this code:

Code (CSharp):

1. public void Initialize(bool showScreen)
2. {
3.     throbberTransform = this.Q<VisualElement>("ThrobberElement").transform;
4.     UpdateManagerBehaviour.OnFixedUpdate += UpdateThrobberRotation;
5. }
6.  
7. //This function gets called like the "FixedUpdate" unity function
8. private void UpdateThrobberRotation()
9. {
10.     currentThrobberRotation += ThrobberRotationSpeed;
11.     throbberTransform.rotation = Quaternion.Euler(0, 0, currentThrobberRotation);
12. }
13.  

I realized that the throbber was being rotated not around the enter of the image, but around the upper left corner of it.


In light of what I have told you I have 2 question:
1. Will unity provide some out of the box solution to make this easier?
2. How can I make the throbber spin around its center instead of its uppper left corder? There does not seem to be way to change its anchor.

 

https://forum.unity.com/threads/css-transform.1050740/

https://forum.unity.com/threads/visual-element-scaling-pivot-position.747011/

Hope it helps!

 

Yes! Thank you that helped.