Skeleton Loading Screen Animation using HTML and CSS

Skeleton screens are blank pages that are progressively populated with content, such as text and images, as they become available (i.e. when network latency allows). Grey or neutral-toned filled shapes, commonly called placeholders, meet the user instantly upon user interaction with calls to action or links.

In this article, we are creating a Facebook like Skeleton Loading Screen Animation.

Full Source Code Here :

<style type="text/css">
  
  *{
    margin:0;
    padding:0;
    box-sizing: border-box;
  }

  body{
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  .card{
    max-width: 350px;
    width:100%;
    background: #fff;
    padding:30px;
    border-radius: 10px;
    border:1px solid #d9d9d9;
  }
  .card .header{
    display: flex;
    align-items: center;
  }
  .header .img{
    height:75px;
    width:75px;
    background: #d9d9d9;
    border-radius: 50%;
    position: relative;
    overflow:hidden;
  }
  .header .details{
    margin-left:20px;
  }
  .details span{
    display: block;
    background: #d9d9d9;
    border-radius: 10px;
    overflow:hidden;
    position: relative;
  }
  .details .name{
    height: 15px;
    width: 100px;
  }
  .details .about{
    height:13px;
    width:150px;
    margin-top: 10px;
  }
  .card .description{
    margin: 25px 0;
  }

  .description .line{
    background: #d9d9d9;
    border-radius: 10px;
    height: 13px;
    margin:10px 0;
    overflow: hidden;
    position: relative;
  }
  .description .line-1{
    width: calc(100% - 15%);
  }
  .description .line-3{
    width: calc(100% - 40%);
  }
  .card .btns{
    display: flex;
  }
  .card .btns .btn{
    height:45px;
    width:100%;
    background:#d9d9d9;
    border-radius: 25px;
    position: relative;
    overflow:hidden;
  }
  .btns .btn-1{
    margin-right:8px;
  }
  .btns .btn-2{
    margin-left: 8px;
  }
  .header .img::before,
  .details span::before,
  .description .line::before,
  .btns .btn::before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #d9d9d9 0%, rgba(0,0,0,0.05) 20%, #d9d9d9 40%, #d9d9d9 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 1s linear infinite;
  }

  .header .img::before{
    background-size: 650px 600px;
  }

  .details span::before{
    animation-delay: 0.2s;
  }
  .btns .btn-2::before{
    animation-delay: 0.22s;
  }

  @keyframes shimmer{
    0%{
      background-position: -450px 0;
    }
    100%{
      background-position: 450px 0;
    }
  }

</style>

<div class="card">
  <div class="header">
    <div class="img"></div>
    <div class="details">
      <span class="name"></span>
      <span class="about"></span>
    </div>
  </div>
  <div class="description">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
  </div>
  <div class="btns">
    <div class="btn btn-1"></div>
    <div class="btn btn-2"></div>
  </div>
</div>

Follow this video for complete guidance :

 

Reference : https://www.codingnepalweb.com/2020/11/skeleton-loading-screen-animation.html