JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.loading {
  background-color: #ededed;
  height: 12px;
  width: 500px;
  overflow: hidden;
}

.animation {
  animation: loading 1.2s linear;
  animation-iteration-count: infinite;
  background-color: #e0e0e0;
  height: 100%;
  left: 0;
  position: relative;
  top: auto;
  width: 300px;
}

@keyframes loading {
  from {left: -30rem}
  to {left: calc(100% + 30rem)}
}