Animated Loading Spinner Tutorial

Key Takeaways

Hello everybody welcome to this week's CSS challenge video in this video I'm going to be creating this animated loading spinner on the right here using just basic CSS properties for animation as you can see on the left here I have my stylesheet for background Styles linked here which just includes background coloring and centering of this image and then I have the Styles sheet here for styles.css where we will put all of our styles for creating this animated spinner on the right here to get started let's first create the HTML that we need for this spinner the first thing that we need to do is create a container that all the spinner objects are going to go inside of so we'll create a div here we'll give it a class and we'll just call it spinner to say that everything inside of this is going to be our spinner then inside of that spinner class we have four different elements we'll need the first one is this text right here for loading so we need another div we'll just give it the class of spinner text and inside there we'll put loading and then after that we're just going to need three more divs and each one of these divs is going to have the class of spinner sector since these will be the sectors that rotate around or loading text and then we'll give each one of them another class spinner sector and then the color so we have a red one and we copy that and paste it we'll also have a blue one and a green one here and that's all the CSS or all the HTML that we need in order to create this spinner let's open that up using live server so so we can see what we're working with and here we go we have our loading text right in the middle but right now none of these divs are rendering anything because we've given them no CSS Styles which is perfect so let's get started into our styles.css in order to style these different elements now before I get started adding any styles to add to this animation I first want to say thank you guys for all the support that you gave me on the first CSS challenge video and because of that I am going to make this weekly series I'm not sure exactly which day I should upload this series though I'm thinking Saturday currently but if you haven't any suggestions please let me know down in the comments below also let me know if you have any suggestions for future CSS challenges because I'd love to hear them from you and I'd rather create things that you guys want me to create than things that I think of on my own okay now that's out of the way let's get started with our actual Styles the first style we want to apply is a style I apply to almost every style sheet which is box sizing of Border box so that our widths and percentages and paddings all add up to be the width of the object which makes it much easier for styling everything and now we can get on to actually styling our spinner element here which is the container all of our spinner objects are going to go inside of the first thing we want to do is make it so the text of our loading is going to be dead center inside of our spinner so we'll make our spinner display Flex since Flex box makes it easy to align things we'll give our justifi content of Center and align items Center in order to Center our text vertically and horizontally and then we need to give a width and a height to our spinner so that our spinner knows how large to be so we're just going to use a width of 300 pixels and a height here also of 300 pix so it's a perfectly round circle and then lastly we want to set position relative onto our spinner since we are going to be absolutely positioning our spinner segments inside of our spinner now let's go on to styling the actual sectors of our spinner we'll use the spinner sector class that we added to all of our different Spinners in order to style these the first thing that we want to do is since we want to use a circle we need to use a border radius of 50% which will make our object completely circular as opposed to a rectangle next we'll need to position our object absolutely so that way we can position it inside of our spinner object and have it rotate around our spinner object next let's make our width and our height 100% so that this object will fill the entire space of our spinner currently and to see this let's just add a background color here background color and we'll just make it red and if we save that you'll see that we now have a red circle which is perfect but we want this circle to only be a portion of the circle as well as only a segment of it we only want a small thin band around the circle and only a segment of it for each of our sectors in order to do that we'll use borders around our element so let's go in here and let's add a border to the top only and we'll give it 15 pixels solid border and we'll make it blue so that it stands out from the red that we have right now and as you see we have this moon-shaped border around our object but we don't want this moon-shaped we want it to be hard edges on the sides so in order to fake this what we're going to do is we're going to use a transparent border around the rest of the edges so if we go here and put border we're going to make it 15 pixels as well we're going to make it soft and we're going to make it transparent and if you save that you now see that this border cuts off our other border so that we have a perfectly cornered edges to see this a little bit easier let's put a border right on our object that is 15 pixels solid green and then we'll do another border on the left here and we'll make this one yellow and if you say that you see that these borders let's get rid of this transparent one to see it a little easier these borders butt right up against each other which cut off these hard edges which is what we want as opposed to this Moon shaped Edge you see on the other borders so if we make this border transparent this green border and yellow border transparent it'll essentially just show what's behind it while cutting off that top border so that's why we had this border 15 pixels transparent here to give these hared edges and we can remove these other borders since we don't actually need them and there we go that creates the sector that we need around our Circle we can get rid of this background color here too and as you can see that's starting to come together already well you'll notice we don't want to apply this blue color to all of the sectors we only want certain sectors to have different colors so that's why we created these spinner sector color classes so blue here for example and we'll give it the Border top we'll give it 15 pixels solid and we'll use light blue as our color here and if you save that we now have this light blue color on the top of our border let's make sure all of our different sectors for our different colors are color here so here for red we're going to use light coral and then for green going to just use light green here green there we go and if you save that and we go back to our index page here as you can see our green one showing cuz it's on the bottom here if we comment that out you now see our blue one is showing if we Comon out the blue one you'll see that our red one is showing so we have all three of our different sectors showing but they're all right on top of each other right now in order to fix this what we're going to do is add animations to these sectors so that they rotate around the object at different speeds so that they're constantly overlapping and uning from each other in order to create an animation the first thing we need to do is create key frames for our animation so at the bottom here let's define some key frames using at Key frames and then we put the name of what these key frames would be called so we'll just call it rotate since that's what our key frames will do and then inside of our key frames we can Define where our key frame will start and where it will end for our animation to define the start we use the fum property and we need to find that we want our transform to start here at a rotate of zero so this is saying at the beginning of our transformation at the beginning of our rotation animation our object will have a rotation of zero which is perfect then what we want to do is we want to assign the two property which is where we want our animation to animate two so we go from two so this is going to be the end of our animation we want to have a transform rotate of 360° so essentially our object will rotate from 0° all the way to 360° so it'll rotate around the circle all the way back to where it started at the top and to apply this rotation animation all we do is go into one of our sectors so if we go to our blue one for example we use the animation property we tell the name of our animation so we'll say rotate then we tell it the duration so we'll say 1 second and if we save that you'll see that now our object is animating around but it only went once and that's because we need to tell it to animate infinitely so we use the infinite property here to tell it to continually animate around the object and as you can see it rotates around here in 1 second but you'll notice it's not entirely linear it goes kind of slow at the top and faster at the bottom and that's because we have a timing function of e by default onto all of our animations if we wanted a linear animation we would use the linear timing function here and if we save that you now see that the speed is constant for the entire animation what we'll want to do is we'll just set this to ease for now and as you can see that looks pretty good and it's somewhat random so now we can use animation property here we can use these same key frames on our red one and if we say that and change the time here to let's say 2 seconds instead of one you see that now our red object is also animating around but it is doing so at half the speed of the blue one we can also change this timing function here to be ease in and if we save that you'll now see that it starts out very slow and then speeds up as it goes because ease in will start slow and then speed up at the end and now that gives us a little bit more of a random effect since our timing functions are different and our speeds are different so these objects will constantly overlap each other and come unla from each other throughout the entire duration of the animation lastly we can do the same thing for our green one here we can add our animation we can make it 1.5 seconds for example and we can make this one ease out and if we save that now all of our objects are animated around the loading icon and it already gives us a bit of a similarity to what we have over here on this loading screen as you can see though one key difference between these two animations is that as these different sectors overlap you see that the color actually Blends together so when we overlap green and red we get that yellowish color when all three overlap we get white and so on in order to do this we need to use What's called the mix blend mode property this property we apply to our spinner sector here so mix blend mode and this says how should these different objects blend together if they overlap and we want to use overlay which means these two colors should overlay on top of each other and give us whatever color comes from combining those two colors so if we do that we save that and we go back to our animation here you see that now as our objects overlap they change colors you also see that this animation is quite a bit faster than this animation so let's go into our timing here and we'll just slow down our different timing for the blue we'll make this one 2 seconds and we'll make it ease out for our red one here we're going to make this one 2.5 seconds so it's a little bit slower and then lastly our green one we can keep it 1.5 seconds but we'll make it ease in out so that it starts out slow and end slow and if you save that we now have the same animations that we have over here for our loading screen the only thing left for us to do is to add the animation for our actual text inside of here so that it fades in and out slowly as well is to increase the size of our text so if we go back here we have a class already of spinner text so we can select that spinner text we'll just increase the font size here to 2m if we save that you now see that our font has grown quite a bit but we also need to add a new key frame for this to change the opacity of this so that it fades in and out in order to do that let's scroll down here add another key frames property we'll call this one loading opacity let just say that this is going to be our loading text opacity value and here we used from and to but if you need more fine grained control over your animation such as what do you do in the middle of your animation what do you do halfway through like in the quarter way through your animation you can use percentages so here for example we can use 0% to say at 0% we want our opacity to be one then let's say at 50% here we want our opacity to be 0.1 and then somewhere in the middle let's say at 25% here we want our opacity to be equal to5 if we save that go up to here if we add an animation for this so we'll say our animation is going to be loading opacity now because it must be the same name as the key frame down here so we have loading opacity we'll just keep it at 2 seconds ease out infinite for now and if you save that you see that our text is fading in and fading back out but is doing so at a slightly irregular speed and this is because our key frame jumps back to what we have at 100 at 0% as soon as it finishes so it fades down all the way to 0.1 and then jumps all the way back up to one opacity after it reaches 100% because at 100% it automatically jumps back to the start in order to fix this and make it a little bit smoother what we'll do is we'll say at 75% we also want to have a 0.5 opacity and at 100% here we want it to go back to one this will make our animation completely smooth all the way down to 0.1 and then back up to 1 since essentially it'll go from 0 to 25 it'll drop from 1 to.5 from 25% to 50% % it'll drop down to 0.1 and then from 50% to 75% back to 0.5 and 75 to 100 back to 1 and since our zero and 100% both match there'll be no jump that it has to make to get back to where the animation starts at now the only thing left to do to make this animation exactly the same as this animation is to slightly slow down our loading speed time here so if we go up to here we can change this to be 3 seconds so it's a little bit slower and we'll make it ease in as since it's a little bit smoother of an animation and if you say that you now see our text will slowly fade in and out as our circles go around saying that the page is loading and this is all there is to creating these Spinners here really it's not much content other than these animation tags and these key frames telling the object exactly what to do between different animations and the great thing about these key frames and animations is you can completely customize them at any point I could for example change color here instead of transform I could change theor color the text here if I wanted to you can use any amount of properties that you want to change inside of these key frames and it'll smoothly animate between them based on the amount of time you tell the animation to last and the timing function for the animation you can even specify custom timing functions using a cubic bezier but that is a little bit more complex and for the most part these pre-built ease in out or ease in ease out whatever these will be all you really need to do for creating your custom good-look animations I hope you guys really enjoyed this this video and learn something about animation which is one of my favorite things about CSS it allows you to create such Dynamic looking elements using just simple key frames and animation properties and you don't need to incorporate any custom JavaScript or anything to create these smooth looking animations these animations are great for anything from loading screens to loading animations for your entire page when it finally loads to buttons to really anything that you can think of that needs to change State over time it's incredibly versatile and one of the most enjoyable things in my opinion to code and CSS so if you guys did enjoy this video please leave a like down below and comment below letting me know what I should create in the future I really enjoy creating your guys' feedback more so than creating mine so I'd really appreciate it if you guys let me know what you want me to create thank you guys very much for watching and have a good day