JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="blocks">
  <div class="loading"></div>
  <div class="loading"></div>
  <div class="loading"></div>
</div>

CSS

@keyframes loading {
  0% {
    background-position: calc(150% + 13vw) 0;
  }
  100% {
    background-position: -4rem 0;
  }
}

.blocks {
  display: flex;
  gap: 2rem;
}

.loading {
  width: 66vw;
  height: 100vh;
  box-shadow: 0 0 2rem #0004;
  
  background: indigo linear-gradient(95deg, transparent 7vw, #fff2 7.5vw, transparent 13vw) 0 0 / 13vw 100% no-repeat;
  animation: loading 1.8s linear infinite;
  //background-position: 50%;
  background-attachment: fixed;
}