JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<div class="loader-wrapper">
  <span class="loader"></span>
</div>
<div class="loader-wrapper">
  <span class="loader"></span>
</div>
<div class="loader-wrapper">
  <span class="loader"></span>
</div>
<div class="loader-wrapper">
  <span class="loader"></span>
</div>
<div class="loader-wrapper">
  <span class="loader"></span>
</div>

SCSS

$bg-color: #1F212A;
$loader-dark-color: #191B22;
$loader-light-color: #444961;

html,body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: $bg-color;
}

* {
  box-sizing: border-box;
}

.loader-wrapper {
  padding: 0px 50px;
  margin: 20px auto 0;
}

.loader {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: block;
  background-color: $loader-light-color;
  background: linear-gradient(to right, $loader-dark-color 1%, $loader-light-color 25%, $loader-dark-color 50%);
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: bgAnimate;
  background-size: 300px; 
}


@keyframes bgAnimate {
    0%{ background-position: -150px 0; }
    100%{ background-position: 150px 0; }
}