JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="loader"></div>
<div class="loader mask"></div>

CSS

.loader:before {
  display: block;
  width: 100px;
  height: 100px;
  background: linear-gradient(90deg, #ee786e, #fceeb5, #ee786e) 100% 100%/ 50% 100%;
  animation: ani 1s linear infinite;
  content: "";
}
@keyframes ani {
  0% {
    background-position: 0px 50%;
  }
}

/* Remove any one of these to make bug disappear */
.loader {
  transform-style: preserve-3d;
}
.loader:before {
  transform: rotatey(0deg);
}
.mask:before {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}