<div class="container">
  <ul class="list skeleton">
    <li>
      <div class="skeleton-thumb"></div>
      <div class="cont">
        <span class="skeleton-bone txt-brand"></span>
        <span class="skeleton-bone txt-title"></span>
      </div>
    </li>
    <li>
      <div class="skeleton-thumb"></div>
      <div class="cont">
        <span class="skeleton-bone txt-brand"></span>
        <span class="skeleton-bone txt-title"></span>
      </div>
      
    </li>
  </ul>
</div>
            

.skeleton{
  display: flex;
  flex-direction:row;
  padding: 20px;
}
.skeleton li{
  width: 20%;
  margin-right: 30px;
  box-shadow : 5px 5px 10px #ccc;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px
}
.skeleton-bone {
    display: block;
    width: 100%;
    height: 20px;
    margin-bottom: 0.5em;
  }
.skeleton-thumb,
  .skeleton-bone {
    position: relative;
    overflow: hidden;
    background-color: #ccc;
    margin-bottom:10px;
  }
.skeleton-thumb::before ,
.skeleton-bone::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transform: translateX(-100%);
      background: linear-gradient(0.25turn, transparent, #fff, transparent);
      pointer-events: none;
      opacity: 0.8;
      animation: skeleton-animation 2s infinite;
    }
.skeleton-thumb {
        width: 100%;
        height: 180px;
        background-size: cover;
}
.skeleton-thumb:not(:empty)::before {
          display: none;
}
.skeleton-thumb img {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
}

@keyframes skeleton-animation {
  0% {
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}