JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div id="out">
  <div id="in">

  </div>
</div>

CSS

#out{
  display: flex;
  padding: 8px;
  background: blue;
  min-height: 18px;
  align-items: center;
}

#in {
  flex: 1;
  height: 16px;
  width: 100%;
      background-position: 0px 0px;
    background-size: 400% 400%;
    animation: animatedBackground 9s ease infinite;
  background-image: linear-gradient(to right, 
  rgba(255,255,255,0) 0%, var(--job-block-colour, grey) 50%, 
  rgba(255,255,255,0) 100%);
}


@keyframes animatedBackground {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}