How To Create Loading Spinner In Figma

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 90

  • @dianejibbs7914
    @dianejibbs7914 Год назад +3

    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.

  • @REVERBURN
    @REVERBURN 2 года назад +23

    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.

  • @Strawberrypiecream
    @Strawberrypiecream 2 года назад +20

    Great video! The key is to rotate the vector inside the variants, not the variants themselves.

    • @productmeow
      @productmeow  2 года назад +4

      Yes ! That’s the secret sauce 🤭

    • @xlinqmedia
      @xlinqmedia 2 года назад +2

      Ur comment gave me the insight that make the component works, thank u

    • @tochidioka6019
      @tochidioka6019 2 года назад +1

      What!!!! i thought I had problem with my Figma!!!! Thank you for this tip!

    • @pawsitivityatwork
      @pawsitivityatwork Год назад +1

      thanks for this! fixed my file!

    • @lucio8527
      @lucio8527 Год назад +1

      THANK YOU SO MUCH, I've been trying for hours to find what was the issue.

  • @lordasiedu9270
    @lordasiedu9270 2 года назад +1

    A gem... Upon all the videos i have watched so far, yours is easy to follow along.. Thank you so much

    • @productmeow
      @productmeow  2 года назад

      Thank youu for watching ~ happy learning :)

  • @xlinqmedia
    @xlinqmedia 2 года назад +2

    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

    • @productmeow
      @productmeow  2 года назад

      Thanks for the kinds word. Will keep this in mind for future videos 🙏

    • @sherrimoss20
      @sherrimoss20 2 года назад

      what is the secret??? I cannot figure this out and I have spent hours on this!

  • @baturesolomon4687
    @baturesolomon4687 Год назад +2

    Hello great video could you please help as my spinner is not rotating

  • @pujadhakan2400
    @pujadhakan2400 Год назад +3

    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

  • @bensonkehinde2788
    @bensonkehinde2788 Год назад

    Best Spinner video ever🥳

  • @bradolcott
    @bradolcott 2 года назад +2

    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.

    • @productmeow
      @productmeow  2 года назад

      You’ll need to create a frame on the canvas and place an instance of your component inside it

  • @piotrgorski1945
    @piotrgorski1945 Год назад +1

    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.

  • @SolomFoz
    @SolomFoz 2 года назад +4

    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.

    • @productmeow
      @productmeow  2 года назад

      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.

    • @SolomFoz
      @SolomFoz 2 года назад +4

      @@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.

    • @productmeow
      @productmeow  2 года назад

      @@SolomFoz Glad everything works out for you :) Keep experimenting ! 🔥

    • @yazeedirshaid
      @yazeedirshaid 2 года назад +1

      @@SolomFoz iI had the same issue. Instead of rotating them, I just change where the angular graduation start from and now it works!

    • @ayomideashiru554
      @ayomideashiru554 2 года назад

      @@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

  • @ubi-wan-kenobi
    @ubi-wan-kenobi Год назад

    Thanks a bunch,just did it now and it worked!!!

  • @SelinaOgbebor-lb3sx
    @SelinaOgbebor-lb3sx 7 месяцев назад

    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

    • @productmeow
      @productmeow  7 месяцев назад

      Watch this tutorial:
      Figma Loading Spinner - 2024 UPDATED
      ruclips.net/video/iHXqpRwj6tk/видео.html
      I created an updated tutorial on this - with more clarity and emphasis on areas where learners typically implemented incorrectly.

  • @musfirahnadeem2105
    @musfirahnadeem2105 2 года назад

    The arc is missing for me. I don't know what to do

  • @elianbogado2243
    @elianbogado2243 2 года назад

    Thanks for the video! It really helped me

  • @hoangnghi7516
    @hoangnghi7516 2 года назад +1

    great prototype but my spinner can't rotate. I dont know what i mistake

    • @productmeow
      @productmeow  2 года назад

      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.

  • @daydreamer1179
    @daydreamer1179 2 года назад

    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

    • @productmeow
      @productmeow  2 года назад +1

      Make sure you are rotating the ellipse and not the component.
      To target the ellipse, double click on the component to reach it.

  • @dayyanahfurnie681
    @dayyanahfurnie681 2 года назад

    Hi there. Im trying to this with a 3D object but for some reason it does not play when in demo preview.

    • @productmeow
      @productmeow  2 года назад

      Able to demonstrate the issue you’re facing via a video walkthrough? Can try to help from there

    • @dayyanahfurnie681
      @dayyanahfurnie681 2 года назад

      @@productmeow that would be amazing could I possibly email you to plan?

  • @eduobex
    @eduobex 2 года назад +1

    I didn't work but I tried it on different frame without creating a variant it worked

    • @productmeow
      @productmeow  2 года назад

      Glad it all worked out in the end :)

  • @mooma3032
    @mooma3032 2 года назад

    Thanks! It helps a lot!!

  • @hunthai4458
    @hunthai4458 2 года назад +2

    It's really pretty cool But idk not work for me, I did exactly like the video

    • @productmeow
      @productmeow  2 года назад

      Which part is not working for you ?

  • @protocol4313
    @protocol4313 Год назад

    i follewed the steps, the progressbar is not loading

    • @andy6515
      @andy6515 Год назад

      it's bc the clip content box is checked

    • @productmeow
      @productmeow  8 месяцев назад

      Figma Loading Spinner - 2024 UPDATED
      ruclips.net/video/iHXqpRwj6tk/видео.html
      You’ll find this video helpful :)

  • @biranmisadim
    @biranmisadim Год назад

    ayy müthişsin!!!!!!!

  • @cozzijor
    @cozzijor 11 месяцев назад

    It doesnt work. Made rotation on the ellipse but just dont move ;/(

    • @productmeow
      @productmeow  11 месяцев назад

      Figma Loading Spinner - 2024 UPDATED
      ruclips.net/video/iHXqpRwj6tk/видео.html
      Watch this most updated video on how to create loading spinner

  • @AlguienllamadoYi
    @AlguienllamadoYi Год назад

    it doesn't work for me ;(

  • @moransotto256
    @moransotto256 2 года назад

    I went through all the comments and it still doesn't work for me..

    • @productmeow
      @productmeow  2 года назад

      Which part are you having difficulties with specifically ?

    • @moransotto256
      @moransotto256 2 года назад

      @@productmeow In the spinner part, the prototype doesn't work..

    • @moransotto256
      @moransotto256 2 года назад

      @@productmeow Ok I'm really sorry, I just checked in the browser and it works great. Before that I worked on Local FIGMA

    • @moransotto256
      @moransotto256 2 года назад +1

      Thank you very much!

    • @productmeow
      @productmeow  2 года назад

      Glad it all worked out for you !

  • @smitasharda6211
    @smitasharda6211 2 года назад +1

    nope, didn't work for me too.

    • @productmeow
      @productmeow  2 года назад

      Which part is not working for you ?

  • @ninjahattorianddoraemon
    @ninjahattorianddoraemon 2 года назад

    Does not work for me either, I followed the video.

    • @Dachinzzz
      @Dachinzzz 2 года назад +2

      Try rotating the ellipse itself and not the component. Double click the ellipse to target the ellipse itself. Then rotate as you wish.

    • @productmeow
      @productmeow  2 года назад

      Which part is not working for you?

    • @ninjahattorianddoraemon
      @ninjahattorianddoraemon 2 года назад

      @@Dachinzzz thank you

  • @fourseasonswithnoreason26
    @fourseasonswithnoreason26 2 года назад

    sadly wont work for me :(

    • @productmeow
      @productmeow  2 года назад

      Which part didnt work for you ?

  • @victorjuwe7879
    @victorjuwe7879 2 года назад +1

    so sad it didn't work bro

    • @productmeow
      @productmeow  2 года назад

      Which part is not working for you ?

    • @gonzalomenendez54
      @gonzalomenendez54 2 года назад

      @@productmeow Same problem. When I go to the variants, they don't change at all. I have rotated manually but it didn't work.

  • @CDRClarisse
    @CDRClarisse 2 года назад

    I give up. It doesn't work.

    • @productmeow
      @productmeow  2 года назад

      Which part is not working for you ? Perhaps I can help

  • @Vksstaffyou
    @Vksstaffyou 2 года назад

    Not spin

  • @famjam954
    @famjam954 2 года назад

    Not working

    • @productmeow
      @productmeow  2 года назад

      Which part is not working for you ?

    • @famjam954
      @famjam954 2 года назад

      @@productmeow while prototyping

    • @productmeow
      @productmeow  2 года назад

      @@famjam954 which specific part of the spinner is not working for you?

    • @famjam954
      @famjam954 2 года назад

      @@productmeow while preview it is not rotating

    • @productmeow
      @productmeow  2 года назад +1

      Make sure the rotation was done on the ellipse and not on the entire component