Create an Animated Loading Wheel Component in Figma

In this Figma prototyping / component tutorial, we'll be taking a look at creating an animated, spinning loading wheel in Figma. This component enables you to use its instance in a prototype that will be automatically animated in an infinite loop, enabling you to create for example loading screens. This tutorial is good for beginners, easy to follow and explained step-by-step.

Topics: Loading wheel animation, figma animation, figma animated component, prototyping

—————————
© 2022 Mavi Design

[stonestone]

for those guys that cannot make it, looks at the video at 3:46, look closely. The author click at the variant first, then click at the esclipe and only rotate. If you just rotate the originally excplise after you add, it will unable to make the circle turn

[shreyasaha]

When i am trying to connect the last eclipse with the first one it is not allowing the after delay option. What to do

[dicxkrw]

How do you get the dots on the circles to not move when you are connecting the prototype?

[BethesdaSkater]

I've tried this tutorial and one other that takes the same approach, and for both I get no rotation, just the first variant sitting there. Do you know what might be going on with it?

[batorshikhgombojav]

is it possible for export to svg or not ?

[AsimAntuleVlogs]

Awesome! Was trying this but wasn't getting this smooth animation. Thanks for your video. It really helped. <3

[nazimrakin]

I just followed as like direction but sir its not

[pazhammedo]

I followed your steps but its not working here, what am I not doing right?

[maheshshanbhag]

Please show us How to create heart rate monitor waves in figma

[stivenmorantjimenez]

How to download the animation as a gif?

[talbenezra]

I followed every step. But it doesn't animate. just sits there

[nikhilkhanal]

This shyte still aint working. Dimag ka bhosda ho gaya