.item {
  width: 100%;
  height: 55px;
}
.item .avatar {
  float: left;
  width: 56px;
  height: 56px;
  background-color: #ccc;
  border-radius: 0.5rem;
  margin-right: 8px;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-avatar 1s infinite ease-out;
}
.item .line {
  float: left;
  width: 60%;
  height: 8px;
  margin-top: 12px;
  border-radius: 3px;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-lines 1s infinite ease-out;
}
.item .avatar + .line {
  margin-top: 11px;
  height: 10px;
  width: 70%;
}
.item .line ~ .line {
  background-color: #ddd;
}

@keyframes shine-lines {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 300px;
  }
}
@keyframes shine-avatar {
  0% {
    background-position: -32px;
  }
  40%, 100% {
    background-position: 208px;
  }
}