DEV Community

loading...
Cover image for YouTube Loading animation using HTML and CSS

YouTube Loading animation using HTML and CSS

stackfindover profile image Stackfindover ・3 min read

In this tutorial we will create skeleton screen loading effect using CSS. The skeleton screens are used to indicate that the content is loading. They are also called splash screens. This is a part of the modern design trend. The skeleton screens are better than the loading spinners in some cases. It is used by many big companies like Facebook, Google, etc.

HTML Code: In this section, we will create a basic structure of loading page screen skeletons. To create a loading page skeleton, we have to use the <div> element where we will display the content. We will add a loading class to each element inside the card which we will remove when the content is loaded.

YouTube Loading animation step 1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Skeleton screen effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="row">
      <div class="container">
        <div class="grid-row grid-4-4">
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
          <div class="cards">
            <div class="card_image loading"></div>
            <div class="card_title loading"></div>
            <div class="card_description loading"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

YouTube Loading animation step 2:

CSS Code: In this section, we will use some CSS property to create a loading page screen skeleton.

* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
.row {
    display: block;
    position: relative;
    margin: 50px 0;
}
.container {
    width: 95%;
    max-width: 1240px;
    margin: auto;
}
.grid-row.grid-4-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.cards {
    background: #fff;
    height: auto;
    width: auto;
    overflow: hidden;
    box-shadow: 5px 8px 15px -10px rgba(0,0,0,0.25);
}
.card_image {
    width: 100%;
    height: 100%;
}
.card_image.loading {
    width: 100%;
    height: 180px;
}
.card_title {
    padding: 8px;
    font-size: 22px;
    font-weight: 700;
}
.card_title.loading {
    width: 50%;
    height: 1rem;
    margin: 1rem;
    border-radius: 3px;
    position: relative;
}
.card_description {
    padding: 8px;
    font-size: 16px;
}
.card_description.loading {
    height: 3rem;
    margin: 1rem;
    border-radius: 3px;
}
.loading {
    position: relative;
    background: #cccccc;
}
.loading:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100px);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: loading 0.8s infinite;
}
@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}
Enter fullscreen mode Exit fullscreen mode

YouTube Loading animation output:

For more interesting content

Visit for more!

Discussion (2)

pic
Editor guide
Collapse
maxprogramming profile image
Max Programming

Wow! This was cool!
Just a suggestion, when you create a codeblock using 3 backticks, also specify the language name on the first one to highlight the code too
Alt text of image

Collapse
stackfindover profile image
Stackfindover Author

Thanks for your suggestion :)