Creating a Processing / Progress / Loading Bar animation in Figma

Поделиться
HTML-код

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

  • @ស៊ុនសុវីរៈឧត្តម

    Wow you’re show us something that we don’t expect it was easy like that. Thanks so much man for this sharing !🙏

  • @devikakorde7591
    @devikakorde7591 3 года назад

    Thank you so much for this video.. I was searching for the same information video... Thank you!

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

    Exactly what I needed!!! Thanx a lot! 👌

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

      No worries glad I could help

  • @akshatha.c.bharadwaj5390
    @akshatha.c.bharadwaj5390 2 года назад

    thanks for sharing this and I'd like to know how this works with components and varients make a videos on that also that will be helpfull

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

      I just made this video ruclips.net/video/osmsBRKUOB0/видео.html. Basically you just have to make it a component and animate within that component.. then you can just place that component into any frame or other components..

  • @diskopolowiec
    @diskopolowiec 3 года назад

    thanks for sharing!

  • @deeptisharma2297
    @deeptisharma2297 3 года назад

    How do you connect it to the next screen once the loading is done? I copied these screens a few times and then connected the last screen to the next one. But that doesn't work

    • @totopcYT
      @totopcYT  3 года назад

      interesting.. did you check if your animations are correct.. I'm checking the file now.. it seems that everything is working fine.. be sure the animation is while hovering.. and the mouse is staying on the frame while in preview mode..

  • @mssanad
    @mssanad 3 года назад

    thank you so much!

    • @totopcYT
      @totopcYT  3 года назад +1

      You're welcome

  • @C.J.加拿大
    @C.J.加拿大 3 года назад

    what did you do at 2:24 2:25

    • @totopcYT
      @totopcYT  3 года назад

      I just group the red gradient and the red circle.. Figma file is in the description for your reference

  • @metalgear0945
    @metalgear0945 3 года назад

    how to put this into our own prototype? i tried animating it on my own. it worked by itself, but when i try to put this into my page, it didn't animate

    • @totopcYT
      @totopcYT  3 года назад +1

      you know that the protoype is 3 frames just switching with each other right? You need to make this into a gif. Then paste the gif into your prototype
      Figma supports gif images embed..

    • @metalgear0945
      @metalgear0945 3 года назад

      @@totopcYT cool! i'll try exporting it into a gif. thanks 👍

    • @totopcYT
      @totopcYT  3 года назад

      ​@@metalgear0945 I mean you can't export it as gif using figma, you need to screen capture it.. open and crop and edit it and photoshop and export as Gif..
      Or just make it in photoshop entirely and animate it there that is what i recommend.

    • @metalgear0945
      @metalgear0945 3 года назад

      @@totopcYT well too bad i can't use photoshop. i think there's a figma plugin called motion which i could use, will try later

  • @mkstudio1431
    @mkstudio1431 3 года назад

    i love you!

  • @valeriiia_because
    @valeriiia_because 4 года назад

    Cool! Thank you!

  • @azharansari8946
    @azharansari8946 3 года назад

    uuuuu annnn taaaaooooo

  • @tolokaearnmoney4645
    @tolokaearnmoney4645 3 года назад

    OMG you're talented