How To Create Loading Spinner In Figma

i'll be showing you how to create a loading spinner a loading spinner that you're seeing right now is mainly comprising of two main components the spinner itself as well as the loading tags i'll be showing you how to create both of these separately and a step by step guide next an overview of the components needed to create the loading spinner as you can see we have two component set the spinner set as well as the loading text set for interactions that we are using to create the animations we are only required to use the after delay interaction these are all after delay after delay after delay okay this is all after delay it's the same for the loading tags i'm using after delay for everything see everything is up to delay right so it is really simple but i'll still take you through the whole process in a step-by-step process right so let's see how we can create the spinner animation first to create a spinner you just need a circle shape click on a circle click on anywhere now you have a circle hover over it while we are on the design mode hover over it you can see that as arc click on it and just drag it inwards oh sorry drag it downwards and then you see that there is a dot right at the center click on it drag it away from the center all right right now try to connect the um circle together you can see that there's two dots facing each other over here click on one of it and drag it to each other now you have um a spinner in its most primeval form all right click on a circle click on fill instead of solid we're going to have to change to angular all right for the first color we can choose any color that we want let's say i like to go with green i mean go with blue um for the second one as well i like to go with blue but i just make sure that uh this part is zero percent all right now that i have this create component let's name it i don't know let's call it the spinner and then we just have to create a four variants of it let's click the first pl create a first variant first the first variant and then uh create two more variant all right so right now we have four spinner click on the spinner itself you can see that there's a rotation value for this for the first one we're just going to set it as zero for the second one we're going to have to set it to 90. so just plus 90. for the third one we need to set it to 90 plus 90 and for the last one which is the fourth one which is 90 plus 90 plus 90. i mean if you want to have a shortcut you can just do 90 times three right you can do 90 times three to get 270 all negative 90. right so let me just rearrange it a little okay right now i'm gonna link up all the spinner together for a spinner with 0 degree rotations i'm going to have to link it up with the spinner with 90 degree rotations okay just linked it up click on after delay change the durations to one millisecond as for the animations we're going to have to change it to smart animate instead of ease out change it to linear and you can keep it as a 300 milliseconds for the smart animate right next we're going to link up the spinner with the 90 i mean 90 degree rotations to link up with this spinner with 180 degree rotations which is this one all right so let me just link it up after delay one seconds smart animate linear right great i'm gonna do the same for the third spinner and link it up i'll be linking up the third spinner to the fourth spinner so the third spinner is a 180 degree and the fourth one is 270 degree or a negative 90 degree so let me just link it up again repeat the process after delay one millisecond smart animate linear 300 milliseconds now because we need to create sort of like an endless loop for the animations to happen i'm gonna have to link up the fourth spinner back to the first spinner so the fourth spinner let me just link it to the first spinner all right so this is the first spinner in my case let me link it up again it's the same thing after delay one second smart animate linear 300 milliseconds all right great so right now we have linked all of this up it is always good to just check and make sure that the spinner is working as intended all right so um right let me just call this b menu just to differentiate from the one i've created let's find spin and new uh okay great create a starting point let's call it spinner new showcase all right right click on play oops this is the previous one all right you can see that the spinner is actually working right now right we are looking at spinner new showcase and it's actually working all right so now that we have successfully created the spinner the next thing that i want to show you is how to create the loading text animation to create the loading text animations it's pretty simple select on the text and start typing loading give it three dots [Music] create a component create three more variants of it one the first variance second variant and third variant for the first loading text highlight the three dots go to design scroll down go to fill give it a zero percent field all right for the second one select the last two dot give it a zero percent field as well for the third loading text select the last dot and give it a zero percent uh field right so the reason why i'm doing this is because i'm trying to maintain the width make sure that the width for all of these different components are the same right so right now i'm going to start to link up the uh loading text together click on prototype i'm going to link it up together like this the first loading text to the second loading text using after delay give it a 1000 milliseconds for the animations i'm gonna set it to instant second loading text to the third loading text after delay 1000 milliseconds instant animations third link to fourth after delay one thousand milliseconds animations instant for the last loading text i'm going to link it to the first loading text okay give it after delay 1000 milliseconds instant right and we are done so i'm gonna rename the component just for the sake of these demonstrations loading new go to assets loading text new there we have it just to show you that it is working um i would have to give it a white background right otherwise you can't see it in the prototype so let me just uh create a frame for it right create a frame for it give it a white background just to see that the loading text is working all right i'm going to give a flow starting point for the frame let me just call this loading text showcase click on flow starting point i'm going to give it to the same name for the flow click on play and let's wait a little bit all right it looks a little bit small so let me just make it looks a bit bigger as you can see the loading text animation is now working right so right now that we have two uh of the component sets ready the first one being the speeding spinner animate animations and the second one being the loading text animations we can start to put both of them together to create the loading text animations so we have created the two main components to create the loading spinner the spinner itself as well as the loading tags we're going to start to have to put them together to create the final product all right so let's do that so let me remove this first okay let me find spinner new and let me find the loading text new um as you can see over here the loading bags right now is a little bit small as compared to the spin attacks uh we're gonna have to try to make it you know uh off sort of like a similar size just to make sure that the proportion is right so what i'm gonna do is i'm gonna resize my spinner in this case all right i'm gonna select all my spinner go to design i'm going to make sure that the constraint proportions is being selected and i'm going to reduce the size to 50. right let's arrange it nicely all right there we have it right right now it looks a little bit neater to put the spinner and loading text together i'm gonna in my case i'm gonna use the uh auto layout so i'm gonna select both of these components i'm gonna select both of these components right click add auto layout right for the space between the items i'm gonna give it 16 px right in my case i make sure that it is a vertical directions next i'm going to make sure that the that i center align the items within the auto layout and i'm going to give it a padding of 24px on all sides vertical padding 24px horizontal padding 24px as well right right now for the frame i'm going to give it a wide field just to make sure that it looks a little bit neater i'm going to give it the corner radius of 4px okay so there we have it we have the final product let me rename it final product let's see how it looks like all right give it a flow starting point i'm going to change the name of the flow the final product new and i'm going to click on play let's see how it looks like let's wait a bit all right seems like it is working let me just zoom in a little as you can see we have successfully created the loading spinner you

Channel: Product Meow

Views: 28,761

Keywords: loader, spinning loader, spinning spinner

Id: 3W_WHKg16HM

Length: 15min 42sec (942 seconds)

Published: Sat Jun 25 2022