SCSS

by Neeraj Yadav

HTML

<div class="card">
    <div class="image loading">
    </div>
    <div class="bars">
      <div class="bar bar1 loading"></div>
      <div class="bar bar2 loading"></div>
    </div>
  </div>

SCSS

.card {  
  width:300px;
  float: left;
  border: 1px solid #ddd;
  margin-right: 10px;
  .image {
    background: #e9ebee;
    height: 175px;
  }
  .bars {
    height: 85px;
    .bar {
      background: #e9ebee;
      margin: 0 13px 13px;
      height: 19px;
    }
    .bar1 {
      width: 80%;
      margin-top: 17px;
    }
    .bar2 {
      width: 30%;
    }
  }
}

.loading {
  position: relative;
  overflow: hidden;
  &::after {
    content: "";
    display: block;
    background-color: #dddfe2;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    animation: 1.5s loading-placeholder ease-in-out infinite;
  }
}

@keyframes loading-placeholder {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}