Skeleton tile

by Saksham Malhotra

HTML

<div class="page">
  <div class="skeletonContainer">
    <div class="heading skeleton"></div>
    <div class="subHeading skeleton"></div>
    <div class="text skeleton"></div>
    <div class="text skeleton"></div>
    <div class="text skeleton"></div>
    <div class="text skeleton"></div>
    <div class="text skeleton"></div>
  </div>
</div>

CSS

.page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F0F9FA;
}

.skeletonContainer {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.26);
  background-color: #FFF;
  padding: 20px;
}

.heading {
  padding: 15px 0px;
  width: 200px;
}

.subHeading {
  padding: 10px 0px;
  width: 170px;
  margin-bottom: 25px!important;
}

.text {
  padding: 5px 0px;
  width: 200px;
}

.skeleton {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0)) no-repeat #EFF1F6;
  background-size: 200px 100%;
  animation: 2s ease-in-out infinite progress;
  
  margin: 15px;
}

@keyframes progress {
  0% {
    background-position-x: -200px;
  }

  100% {
    background-position-x: calc(100% + 200px);
  }
}