Create Skeleton Loader 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.