12

YouTube Loading animation using HTML and CSS

 4 years ago
source link: https://dev.to/stackfindover/youtube-loading-animation-using-html-and-css-44c2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for YouTube Loading animation using HTML and CSS

YouTube Loading animation using HTML and CSS

Dec 19

・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.
Source Code: We will update soon :)

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 modeExit 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 modeExit fullscreen mode

YouTube Loading animation output:

For more interesting content

Visit for more!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK