<div class="post-card">
    <div class="loading-box">
        <div class="head white-space">
            <div class="head_1"></div>
            <div class="head_2"></div>
            <div class="head_3"></div>
            <div class="head_4"></div>
        </div>
        <div class="body white-space">
            <div class="body_1"></div>
            <div class="body_2"></div>
            <div class="body_3"></div>
            <div class="body_4"></div>
            <div class="body_5"></div>
            <div class="body_6"></div>
            <div class="body_7"></div>
        </div>
    </div>
</div>

body {
  background: #EEE;
}
.post-card {
  width: 600px;
  margin: 60px auto 0;
  border-radius: 2px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 0 3px #ccc;
  .loading-box {
    height: 200px;
    width: 100%;
    position: relative;
    background-image: linear-gradient(to right, #EEE 0%, #FAFAFA 20%, #EEE 100%);
    background-color: #EEE;
    animation: 1s shimmer infinite linear;
    .white-space {
      div {
        background: #fff;
        position: absolute;
      }
    }
    .head {
      &_1 {
        left:  40px;
        width: 8px;
        height: 40px;
      }
      &_2 {
        width: 60%;
        height: 16px;
        left: 40%;
        top: 0px;
      }
      &_3 {
        width: calc(100% - 48px);
        height: 8px;
        top: 16px;
        left: 48px;
      }
      &_4 {
        width: 50%;
        height: 16px;
        left: 50%;
        top: 24px;
      }
    }
    .body {
      &_1 {
        width: 100%;
        height: 24px;
        top: 40px;
      }
      &_2 {
        width: 30%;
        height: 20px;
        top: 88px;
        right: 0;
      }
      &_3 {
        width: 100%;
        height: 8px;
        top: 108px;
      }
      &_4 {
        width: 100%;
        height: 24px;
        top: 150px;
      }
      &_5 {
        width: 8px;
        height: 26px;
        top: 174px;
        left: 40px;
      }
      &_6 {
        width: calc(100% - 180px);
        height: 26px;
        top: 174px;
        left: 90px;
      }
      &_7 {
        width: 8px;
        height: 26px;
        top: 174px;
        right: 40px;
      }
    }
  }
}

@-webkit-keyframes shimmer {
  0% {
    background-position: 0px 0;
    }
  100% {
    background-position: 600px 0;
  }
}
@-moz-keyframes shimmer {
  0% {
    background-position: 0px 0;
    }
  100% {
    background-position: 600px 0;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: 0px 0;
    }
  100% {
    background-position: 600px 0;
  }
}
@keyframes shimmer {
  0% {
    background-position: 0px 0;
    }
  100% {
    background-position: 600px 0;
  }
}