JSFiddle - React, Tailwind, and code Playground

by Jernej Slejko

HTML

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

SCSS

div {
  width: 100px;
  height:100px;
}
$bg1: rgba(0,0,0, 0.05);
$bg2: rgba(0,0,0, 0.08);
.loading {
  animation-name: loaderMove;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes loaderMove {
  0%   { background: linear-gradient(to right, $bg1 0%, $bg2 0%, $bg1 15%); }
  10%   { background: linear-gradient(to right, $bg1 0%, $bg2 10%, $bg1 25%); }
  20%   { background: linear-gradient(to right, $bg1 10%, $bg2 20%, $bg1 35%); }
  30%   { background: linear-gradient(to right, $bg1 20%, $bg2 30%, $bg1 45%); }
  40%   { background: linear-gradient(to right, $bg1 30%, $bg2 40%, $bg1 55%); }
  50%   { background: linear-gradient(to right, $bg1 40%, $bg2 50%, $bg1 65%); }
  60%   { background: linear-gradient(to right, $bg1 50%, $bg2 60%, $bg1 75%); }
  70%   { background: linear-gradient(to right, $bg1 60%, $bg2 70%, $bg1 85%); }
  80%   { background: linear-gradient(to right, $bg1 70%, $bg2 80%, $bg1 95%); }
  90%   { background: linear-gradient(to right, $bg1 80%, $bg2 90%, $bg1 100%); }
  100%   { background: linear-gradient(to right, $bg1 90%, $bg2 100%, $bg1 100%); }
}