Up next in 10
How To Create Skeleton Loading Animation With CSS
1K views
Feb 7, 2024
Elevate your website's user experience with this insightful tutorial on "How to Create Skeleton Loading Animation with CSS." In this video, you'll explore the art of enhancing perceived performance by incorporating a sleek and dynamic skeleton loading animation into your web pages. The tutorial guides you through the process of using CSS to craft a visually appealing placeholder that engages users while content is being loaded. Whether you're a web developer aiming to optimize user experience or a designer looking to add a polished touch to your websites, this tutorial offers a clear and concise step-by-step walkthrough. Join this session to learn the secrets of creating skeleton loading animations with CSS, bringing a sense of responsiveness and style to your web projects.
View Video Transcript
0:00
Everybody knows that one of the worst things you can do with your website is have a slow
0:03
site. But sometimes you just have a lot of data to load and it's impossible to make your site
0:08
any quicker, which is why many large companies use loading animations such as this, skeleton
0:13
loading animation in order to make their site appear faster. And in this video, I'm going to
0:17
show you exactly how you can create your own skeleton loading animation incredibly easily
0:25
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for
0:29
you and in this video I'm going to show you how you can implement this skeleton loading page
0:33
right here because this is just going to make your site so much more performant feeling for the
0:37
users even without it being any faster. Also it just looks really good and professional
0:42
Best of all, it's really quite simple to implement. To get started, I do have a bit of code already
0:47
written out and all that code does is render out the page that you can see here. It just
0:51
queries an API over here, this is the JSON placeholder API, it gets a bunch of post and it's just
0:56
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
1:02
But none of that is actually important for the actual skeleton loading. It's just there so that you can have something to work with to start with
1:08
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
1:14
I just want to come in here and inspect the page, go to the network tab, and there's a section for throttling
1:19
and we can change the speed to a slow 3G connection. So now when we refresh the page, you're going to notice it takes much longer to load everything
1:25
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
1:32
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 as going on
1:39
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
1:44
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
1:52
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
1:57
and for now I'm just going to put some placeholder data inside of here
2:01
I'm just say like Loram 1 or we'll do it actually, Loram 5
2:07
There we go. So now if we save that and we just turn off the throttle and we don't really need that right now
2:12
you can see we just have one single card that has a title and it has a description and it has an actual image
2:17
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 just going to add a class of skeleton to our image right here And the nice thing is almost always when you working with images you probably going to in your CSS somewhere
2:34
set a specific width and height to that image, which is perfect because it's already defining
2:39
the boundaries for where our skeleton loading animation is going to go
2:43
If we go look at the final example, you can see this skeleton loading animation, it has the circle where our images
2:48
and all we're doing is just taking a gray colored background and kind of pulsing it in and out
2:52
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
2:59
And this skeleton class is going to give us that gray background with the animation. So to do that
3:03
let's set up an animation. This animation, we're going to call it skeleton loading. It's going to be a
3:08
one-second animation that is going to be on a linear path. This means it's just going to transition
3:12
linearly between the two values we give it. It's going to loop forever. So we're going to say infinite here
3:18
Oops, infinite. And then also we want it to alternate. And that just means that the transition from
3:23
the animation is going to go from the beginning to the end and then from the end all the way to the beginning
3:27
So it's not going to jump from the end to the beginning. It's going to be really smooth back and forth. Then we can define some keyframes for that animation
3:33
So we'll just call it animation here. And at 0% we want to start out our background color at some grayish color
3:41
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
3:46
We're going to say that we're going to have 20% for the saturation. So it's going to be pretty grayish looking
3:51
And then the lightness is going to be 70%. because we want it to be a fairly light gray color
3:55
Then we're just going to copy that down for our 100% animation. And all I want to do here is change the lightness
4:01
So instead of 70%, we're going to do 95%, because that's going to give us a very, very light color
4:06
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
4:13
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
4:19
And we're going to save. You can see right now it doesn't really look like anything's going on
4:23
The reason for that, if we go into our styles, is because we call the animation skeleton loading
4:26
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
4:33
So if we remove this div here and we save, you're going to notice we get the animation showing up behind the image
4:39
and then as soon as the image loads in, it covers up that background so we no longer can see that gray color
4:43
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
4:51
Another thing I like to do with this skeletons is I like to change the opacity to something like 0 And the reason that I like to do that is just because depending on what the color of your background is if it like red or green or black it going to bleed that background color through a little bit which is just going to make it look like it fits more inside
5:07
of the container. So, for example, our card down here had a background color of red
5:12
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
5:16
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
5:24
If we just give it a second, you can see it's very gray, very stark. While with that opacity, it gives it more of a red hue, which just looks a lot better in my opinion
5:31
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
5:37
and it doesn't work to just take the text and to change the background color of it with the skeleton here
5:41
and 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
5:48
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
5:54
to take the place of our text. So in here, we can just create a div
5:57
I'm going to give it a class of skeleton to give it that background color
6:01
I'm also going to give it a class of skeleton text, just so we know this is going to be a
6:06
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
6:13
just going to put four lines of text because our body is obviously larger
6:17
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
6:23
If we save right now, nothing is happening because we don't actually have anything loading in
6:28
So inside of our styles, let's create that skeleton text. And right now, skeleton text is just an empty div so it has no width or height
6:35
So we want to define a width of 100% because we always want it to fill the container
6:39
And let's just give it an arbitrary height of .5REM. We could even change it to .5 em if we want the actual size of the container to change with
6:47
the font size. But in our case, we're just going to use .5REM, so it's about half the height of a normal line
6:52
of text. Then we need to obviously put some spacing between these elements, but say that we're
6:56
going to put some margin on the bottom of 0.25 REM. That's just going to space out these lines of text
7:01
And then to give it a little bit more of kind of a fun look, you can see over here we rounded
7:05
the corners of them. It just makes it look a little bit better in my opinion. So I'll come over here
7:09
with a border radius. We're going to set that to 0.25 REM. Actually, let's do 0.125 REM
7:14
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
7:22
shorter than all the other lines just to make it look like it kind of actually showing up as text instead of just a bunch of random lines So a really easy way to do that is come in here get your skeleton text and what we want to do is we want to select the last child
7:35
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
7:40
And then finally here, we're just going to make the width shorter by setting it to 80%. Now you can see that cuts that line short, and in my opinion just makes the text look a little
7:48
bit more realistic and really kind of shows you, hey, we're loading some text in right here
7:52
And that right there is really all the code for the skeleton loading. So let me kind of show you how it actually works
7:56
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
8:03
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
8:11
Then what I want to do is just save. And you notice we're still getting that flash of white content
8:15
And that's because none of our skeleton animations are on the page by default
8:19
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
8:25
you know, like 10 different times, and then we're going to have 10 of those loading. So if I come in here and inspect, change my network to be on like fast 3G and I refresh
8:33
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, but we're going to get those showing up in the background
8:40
and then they're going to be replaced with the actual real content, which looks pretty good
8:44
Another way that you could get around doing this instead of pasting it a bunch of times inside of the grid
8:48
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
8:53
and just pre-populate this grid with a bunch of different elements. So we could just come down here, we could say, for example
8:59
we're going to do a quick for loop where I is equal to 0
9:04
I is less than or equal to 10. Let's just do less than here. And we'll do I plus plus
9:10
And inside of here, we're just going to take our grid, and we're just going to append our card template
9:15
Dot content.comone 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
9:23
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
9:30
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
9:35
We got 10 of them, and then as soon as everything else loads in, we throw in the actual real data
9:39
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
9:47
it's going to be linked down in the description below. It covers all of the selectors you could ever need from beginner to advance
9:52
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
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Online Goodies
#Skins
# Themes & Wallpapers