How To Create Skeleton Loading Animation With CSS

everybody knows that one of the worst things you can do with your website is have a slow site but sometimes you just have a lot of data to load and it's impossible to make your site any quicker which is why many large companies use loading animations such as this skeleton loading animation in order to make their site appear faster and in this video i'm going to show you exactly how you can create your own skeleton loading animation incredibly easily [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you and in this video i'm going to show you how you can implement this skeleton loading page right here because this is just going to make your site so much more performant feeling for the users even without it being any faster also it just looks really good and professional best of all it's really quite simple to implement to get started i do have a bit of code already written out and all that code does is render out the page that you can see here it just queries an api over here this is the json placeholder api it gets a bunch of post and it's just putting those posts on the screen and i have a little bit of css inside of here which is giving us the styling for these different cards but none of that is actually important for the actual skeleton loading it's just there so you can have something to work with to start with and that we can put the skeleton loading on top of so in order to show you what the problem is that we have with this application i just want to come in here inspect the page go to the network tab and there's a section for throttling and we can change the speed to like a slow 3g connection so now when we refresh the page you're going to notice it takes much longer to load everything and once the page actually starts the refresh process you're going to notice it's white and blank for a long time before all the information pops in and then a little while later all the images are going to pop in as well so it's a very slow loading process and for the user it doesn't really seem like much is going on because you just have a white screen that you're staring at and depending on how slow your data is this could take a long time to load so what we want to do is we're just going to take this card right here which is inside of a template i'm just going to copy that paste this inside of this grid up here and for now i'm just going to comment out all of the javascript code we have which is populating out all the information inside of here and for now i'm just going to put some placeholder data inside of here i'll just say like lorem 1 or we'll do actually more m5 there we go so now if we save that we just turn off the throttle links we don't really need that right now you can see we just have one single card that has a title and it has a description and it has an actual image so this is something that we can start with for our skeleton loading and the very first thing i want to do with skeleton loading is to get our image skeleton loaded because this is pretty easy to do we're going to add a class of skeleton to our image right here and the nice thing is almost always when you're working with images you're probably going to in your css somewhere set a specific width and height to that image which is perfect because it's already defining the boundaries for where our skeleton loading animation is going to go if we go look at the final example you can see this skeleton loading animation it has the circle where our images and all we're doing is just taking a gray colored background and kind of pulsing it in and out with a css animation it's actually really easy to do so i'm just going to give us some room at the top here we can select that skeleton class and this skeleton class is going to give us that gray background with the animation so to do that let's set up an animation this animation we're going to call it skeleton loading it's going to be a one second animation that is going to be on a linear path this means it's just going to transition linearly between the two values we give it it's going to loop forever so we're going to say infinite here oops infinite and then also we want it to alternate and that just means that the transition for the animation is going to go from the beginning to the end and then from the end all the way to the beginning so it's not going to jump from the end of the beginning it's going to be really smooth back and forth then we can define some keyframes for that animation so we'll just call it animation here and at zero percent we want to start out our background color at some grayish color in our case we're going to use hsl we're going to use a value of 200 so it has a little bit of a blue hue to it we're going to say that we're going to have 20 for the saturation so it's going to be pretty grayish looking and then the lightness is going to be 70 because we want it to be a fairly light gray color then we're just going to copy that down for our 100 animation and all i want to do here is change the lightness so instead of 70 we're going to do 95 because that's going to give us a very very light color which is going to look pretty good so if we save that and we come over here and we just make sure that we change this image here to a div so we can just see what it looks like without the actual image inside of it so we're just going to give it a div with these exact same classes and we're going to save you can see right now it doesn't really look like anything's going on the reason for that if we go into our styles is because we called the animation skeleton loading so we need to make sure we put skeleton loading as the keyframe name now you can see we get that nice loading animation showing up where our image would be so if we remove this div here and we save you're going to notice we get the animation showing up behind the image and then as soon as the image loads in it covers up that background so we no longer can see that gray color which is exactly what we want so really if you already have a predefined box container all you need to do is just add the skeleton class and it's going to work perfectly another thing i like to do with the skeletons is i like to change the opacity to something like .7.75 and the reason i like to do that is just because depending on what the color of your background is if it's like red or green or black it's going to bleed that background color through a little bit which is just going to make it look like it fits more inside of the container so for example our card down here had a background color of red you can see if i refresh this here our animation for the skeleton has a little bit of a red hue to it because of that opacity which just makes it so it doesn't quite stick out as much if we change this to opacity of one you can see it looks very gray when it loads in if we just give it a second you can see it's very gray very stark while with that opacity it gives it a more of a red hue which just looks a lot better in my opinion which is why i like to do that opacity trick there now the next thing we want to focus on is going to be the actual text itself and it doesn't work to just take the text and to change the background color of it with the skeleton here that's because we don't know what the text is yet right now we're loading the text so technically our box looks like this while it's loading and then when it finishes loading it pops in the actual text so instead we just need to define some placeholder divs that are going to take the place of our text so in here we can just create a div i'm going to give it a class of skeleton to give it that background color i'm also going to give it a class of skeleton text just so we know this is going to be a text thing and usually if you're doing text you're going to want multiple lines so let's put two lines of text here for our title and then inside of our body we're just going to put four lines of text because our body is obviously larger so here we go let me just make sure these are lined up correctly now we have four lines of text in here and two lines of text here if we save right now nothing is happening because we don't actually have anything loading in so inside of our styles let's create that skeleton text and right now skeleton texture is just an empty div so it has no width or height so we wanted to find a width of 100 because we always wanted to fill the container and let's just give it an arbitrary height of 0.5 rem we could even change it to 0.5 em if we want the you know actual size of the container to change with the font size but our case we're just going to use 0.5 rem so it's about half the height of a normal line of text then we need to obviously put some spacing between these elements let's say that we're going to put some margin on the bottom of 0.25 rem that's just going to space out these lines of text and then to give it a little bit more of kind of a fun look you can see over here we rounded the corners of them it just makes it look a little bit better in my opinion so i'll come over here with a border radius we're going to set that to 0.25 rem actually let's do 0.125 rem that just gives us a very slight border corner right there which looks really good now the final thing you'll notice over in this example is we actually cut the final line of text shorter than all the other lines just to make it look like it's kind of actually showing up as text instead of just a bunch of random lines so really easy way to do that is to come in here get your skeleton text and what we want to do is we want to select the last child and in the last child first of all we're going to remove the margin on the bottom just to get rid of any extra space and then finally here we're just going to make the width shorter by setting it to 80 percent now you can see that cuts that line short and in my opinion it just makes the text to look a little bit more realistic and really kind of shows you hey we're loading some text in right here and that right there is really all the code for the skeleton loading so let me kind of show you how it actually works what we can do down here is we can uncomment all of this code right here and what we're going to do is we're going to take all of the information inside of here and we're just going to copy that back down into our template so i'm just going to take all this and replace the template we have down here because that's the template that's being pushed into our page then what i want to do is just save and you'll notice we're still getting that flash of white content and that's because none of our skeleton animations are on the page by default so there's a few ways that we could do this the first way is we could just copy this card and we could paste it inside of this grid you know like 10 different times and then we're going to have 10 of those loading so if i come in here inspect change my network to be on like fast 3g and i refresh you're going to notice we're going to get those showing up let's actually slow that down a bit it's too quick you're going to see once this loads we're going to get those showing up in the background and then they're going to be replaced with the actual real content which looks pretty good another way that you could get around doing this instead of pasting it a bunch of times inside of the grid because that's just kind of a little bit messy just go back here like that what we could do is come down into our javascript and just pre-populate this grid with a bunch of different elements so we could just come down here we could say for example we're gonna do a quick for loop where i is equal to zero i is less than or equal to ten let's just do less than here and we'll do i plus plus and inside here we're just going to take our grid and we're just going to append our card template dot content dot clone node and we're passed in true so this is just cloning all the information inside of our template and we're just going to put it inside of our grid then whenever we load our information we're clearing out all the things in our grid and actually putting the real information in there instead now if i save and we just give it a second to load here you're going to see that we're going to have those skeleton cards being pre-populated we got 10 of them and then as soon as everything else loads in we throw in the actual real data and that's really all it takes to create these awesome loading animations if you enjoyed this video i highly recommend you check out my full css selector cheat sheet it's going to be linked down in the description below covers all the selectors you could ever need from beginner to advanced so it's going to be the perfect tool for you to use when you're writing out css code and with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 146,875

Rating: 4.9803495 out of 5

Keywords: webdevsimplified, css skeleton loading, skeleton loading, skeleton loading tutorial, skeleton loading css tutorial, skeleton animation css, css loading animation, css animation, css skeleton, skeleton css tutorial, css loading tutorial, css animation tutorial

Id: ZVug65gW-fc

Length: 9min 59sec (599 seconds)

Published: Tue Aug 24 2021