How To Create Loading Spinner In Figma
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- Step by step guide to create an animated loader.
The animated loader is made up of two sets of components - (1) Spinner, and (2) Loading Text
For each component sets, we use after delay (with smart animation) to make the spinner spin continuously and make the dots in the loading text to gradually reveal from 0 dot, 1 dot, 2 dots, 3 dots and back to 0 dot and so on. - แนวปฏิบัติและการใช้ชีวิต
Thank you so much. I encountered some issues initially but it finally worked. Here's some tip; When rotating, rotate the eclipse and not the component.
Great tip!
A gem... Upon all the videos i have watched so far, yours is easy to follow along.. Thank you so much
Thank youu for watching ~ happy learning :)
if it didn't work with you : You might want to check that the rotation is done on the elipse and not on the component itself.
🙌🙌
Still it halts for micro sec. It doesn't seem smooth
still didn't work why?:(
THANK YOU!!
saved my life. thank you!
Thanks a bunch,just did it now and it worked!!!
Glad it helped !
Thanks for the video! It really helped me
Glad it helps :)
Great video! The key is to rotate the vector inside the variants, not the variants themselves.
Yes ! That’s the secret sauce 🤭
Ur comment gave me the insight that make the component works, thank u
What!!!! i thought I had problem with my Figma!!!! Thank you for this tip!
thanks for this! fixed my file!
THANK YOU SO MUCH, I've been trying for hours to find what was the issue.
Best Spinner video ever🥳
🤗🤗🤗
Hello great video could you please help as my spinner is not rotating
Ur tutorial makes the design effortless, its super easy, but u hid a secret and it took me time to get it right.
Pls, put begginers like me into consideration, make all the details bear
Thanks
Thanks for the kinds word. Will keep this in mind for future videos 🙏
what is the secret??? I cannot figure this out and I have spent hours on this!
Mine wasn't spinning either after following every step. Then I tried to press the letter r in my keyboard in the prototype and it worked! Hope this helps someone too :D
ayy müthişsin!!!!!!!
Thanks for this tutorial, Product Meow. Can you help demystify the blue notification I see when trying to play a frame with my loading animation prototype in it? It says "A prototype with connections needs a top level frame as the origin." Thank you.
You’ll need to create a frame on the canvas and place an instance of your component inside it
The arc is missing for me. I don't know what to do
Thanks for this video, but animation in interactive component looks like frame by frame animation, even though there's a smart animation. It works when you put the same spinner (not component) in frames and make interaction between them. Then looks great, but that's not the point creating multiple frames just for single animation, it should work as an interactive component.
Hello. I want to clarify that I've tried it and it didn't work. I tried to change the angle of the color itself by 90 degrees every time and it worked. I think there is something to do with their latest figma update where the shape rotations don't work or something.
make sure the different variations of your ellipses have the same name. Also, check that you are using Rotation which is directly below the Width.
@@productmeow Hello. thank you for your reply and thank you for the video. I have found that the problem was in rotating the variant itself, not the Elipse. I've experimented both and found out that when you rotate the variant it doesn't work. cheers.
@@SolomFoz Glad everything works out for you :) Keep experimenting ! 🔥
@@SolomFoz iI had the same issue. Instead of rotating them, I just change where the angular graduation start from and now it works!
@@yazeedirshaidI had the same issue too after creating 3 different times and almost gave up, even making the name the same still did not work .... until I followed the changing of angular graduation, and voila it worked ..thanks
Can someone pls help me with the prototyping of variant 2 to variant 3?. The arrow is not bending according to the what's in the video
Watch this tutorial:
Figma Loading Spinner - 2024 UPDATED
th-cam.com/video/iHXqpRwj6tk/w-d-xo.html
I created an updated tutorial on this - with more clarity and emphasis on areas where learners typically implemented incorrectly.
Does now work for me either, i did exactly same thing in the video, rotation is done on the elipse but it still not work, i don't know what is wrong with it, please help
Make sure you are rotating the ellipse and not the component.
To target the ellipse, double click on the component to reach it.
Hi there. Im trying to this with a 3D object but for some reason it does not play when in demo preview.
Able to demonstrate the issue you’re facing via a video walkthrough? Can try to help from there
@@productmeow that would be amazing could I possibly email you to plan?
great prototype but my spinner can't rotate. I dont know what i mistake
make sure the different variations of your ellipses have the same name. Also, check that you are using Rotation which is directly below the Width.
It's really pretty cool But idk not work for me, I did exactly like the video
Which part is not working for you ?
I didn't work but I tried it on different frame without creating a variant it worked
Glad it all worked out in the end :)
it doesn't work for me ;(
It doesnt work. Made rotation on the ellipse but just dont move ;/(
Figma Loading Spinner - 2024 UPDATED
th-cam.com/video/iHXqpRwj6tk/w-d-xo.html
Watch this most updated video on how to create loading spinner
i follewed the steps, the progressbar is not loading
it's bc the clip content box is checked
Figma Loading Spinner - 2024 UPDATED
th-cam.com/video/iHXqpRwj6tk/w-d-xo.html
You’ll find this video helpful :)
I went through all the comments and it still doesn't work for me..
Which part are you having difficulties with specifically ?
@@productmeow In the spinner part, the prototype doesn't work..
@@productmeow Ok I'm really sorry, I just checked in the browser and it works great. Before that I worked on Local FIGMA
Thank you very much!
Glad it all worked out for you !
sadly wont work for me :(
Which part didnt work for you ?
nope, didn't work for me too.
Which part is not working for you ?
Does not work for me either, I followed the video.
Try rotating the ellipse itself and not the component. Double click the ellipse to target the ellipse itself. Then rotate as you wish.
Which part is not working for you?
@@Dachinzzz thank you
Not spin
I give up. It doesn't work.
Which part is not working for you ? Perhaps I can help
so sad it didn't work bro
Which part is not working for you ?
@@productmeow Same problem. When I go to the variants, they don't change at all. I have rotated manually but it didn't work.
Not working
Which part is not working for you ?
@@productmeow while prototyping
@@famjam954 which specific part of the spinner is not working for you?
@@productmeow while preview it is not rotating
Make sure the rotation was done on the ellipse and not on the entire component
Thanks! It helps a lot!!
Glad it helps !