Create Skeleton Loader using CSS Animations
Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads. Also, CSS Animations are crucial for the perceived performance purposes since it shows for the user the content is loading by using animations as feedback for whoever is accessing the page. In the end, you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations.
Instructor: [0:01] Let's create a new file called index.html. In this file we create a div and add a class called skeleton-loader. Also, we'll add a link for stylesheet file. Now, let's create a new file called style.css, and add the styles for our skeleton-loader.
[0:28] Let's create a class called skeleton-loader. Inside this style add a box-sizing. That will be border-box, a position that will be relative, a background that in this case will be a color. In that case, let's use a gray color. Also, add a no-repeat, so that color won't be repeated if the background is too big.
[0:58] In addition that, let's add our width and height. Both will be 200 pixels. Now, add a small change from the skeleton loader. This will be a circle, add a border radius as 50 percent.
[1:17] We can add animation for our skeleton. For this, we'll be using @keyframes. The name of the animation will be pulse. We add in zero percent, we have opacity as 1. 50 percent, we have opacity as 04, and 100 percent, we have opacity as 1.
[1:38] Also, we add animation in our skeleton load element, so we can use this animation. We'll be at animation field, and we'll be calling pulse. That's in two seconds, and say that we'll be running infinity. Also, we add animation delay of .5 seconds. When we refresh the page, we can see the animation.