JSFiddle - React, Tailwind, and code Playground

by Alexander Lashchevsky

HTML

<div class="el">
  <div class="placeholder"></div>
</div>

SCSS

$color-base: #e20b12;
$amount: 15%;
$speed: 1s;
$width: 2;

.el {
  font-size: 2rem;
  line-height: 3rem;
  height: 3rem;
  background: #000;
}

.placeholder {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 1em;
  background: $color-base;
  overflow: hidden;
  vertical-align: middle;
  margin-top: -.2em;
}

.placeholder::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% / #{$width});
  background: linear-gradient(270deg, $color-base 0%, darken($color-base, $amount) 50%, $color-base 100%);
  animation: loader $speed infinite ease-in-out;
}

@keyframes loader {
    0% {
        transform: translateX(-100%);
    }
    /*30% {
        transform: translateX(100%);
    }*/
    100% {
        transform: translateX(calc(100% * #{$width}));
    }
}