<div class="video"></div>`
```

Now we can start with the CSS. We’ll use the `:empty` pseudo-class that will only display the skeleton when the video `<div>` is empty (including whitespace) and disappear once content has been injected. Developers often use a toggle class to achieve the same effect but this solution is much simpler:

```css
.video:empty {
  width: 315px;
  height: 250px; 
  cursor: progress; 
}
```

The video component contains 4 elements, a semi transparent overlay that we’ll animating to give the illusion of data being fetched, then skeleton representations of a thumbnail, avatar and title text. These 4 elements are created using background CSS gradients. For the skeleton elements we achieve a solid color by using the same color value for both gradient endpoints:

```css
background: 
  linear-gradient(0.25turn, transparent, #fff, transparent),
  linear-gradient(#eee, #eee),
  radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
  linear-gradient(#eee, #eee);
background-repeat: no-repeat;
```

Now we need to define the size for each of these elements:

```css
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
```

Next specify the keyframe animation to be used:

```css
animation: loading 1.5s infinite;
```

Here’s what the complete `.video` class looks like:

```css
.video:empty {
  width: 315px;
  height: 250px; 
  cursor: progress; 
  background: 
    linear-gradient(0.25turn, transparent, #fff, transparent),
    linear-gradient(#eee, #eee),
    radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
    linear-gradient(#eee, #eee);  
  background-repeat: no-repeat;
  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; 
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
  animation: loading 1.5s infinite;
}
```

Final thing to do is add the `@keyframes` animation to the first gradient by shifting the x-axis of the background position to the right hand edge of the parent element. You could also experiment with animating the opacity here for extra visual appeal:

```css
@keyframes loading {  
  to {
    background-position: 315px 0, 0 0, 0 190px, 50px 195px;
  }
}
```

You can now test this code out in a browser, here’s what it should look like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iq5nqzvwgssf7qfklezm.gif)

Hopefully you found this tutorial useful and it serves as a good starting point for building all types of different skeleton loading screens. If you are having trouble figuring out the whole background gradient thing try starting with a single skeleton element before adding additional elements.