JSFiddle - React, Tailwind, and code Playground

by clauswilke

HTML

<div class="rendering"><span class="rendering-text">Rendering, please be patient...</span></div>

CSS

.rendering {
  background-color: #FEFDF2D0;
  font: 16px sans-serif;
  display: block;
}

.rendering-text {
  border: 0.5px solid #201030;
  border-radius: 2px;
  padding: 4px 8px 4px 8px;
  animation: blinker 1.5s linear infinite;
  color: #201030;
}

@keyframes blinker { 
  0% { 
  background-image: linear-gradient(to right, #A8A08F, #FEFDF2D0 5%);
  }
  10% { 
  background-image: linear-gradient(to right, #FEFDF2D0 5%, #A8A08F 10%, #FEFDF2D0 15%);
  }
  20% { 
  background-image: linear-gradient(to right, #FEFDF2D0 15%, #A8A08F 20%, #FEFDF2D0 25%);
  }
  30% { 
  background-image: linear-gradient(to right, #FEFDF2D0 25%, #A8A08F 30%, #FEFDF2D0 35%);
  }
  40% { 
  background-image: linear-gradient(to right, #FEFDF2D0 35%, #A8A08F 40%, #FEFDF2D0 45%);
  }
  50% { 
  background-image: linear-gradient(to right, #FEFDF2D0 45%, #A8A08F 50%, #FEFDF2D0 55%);
  }
  60% { 
  background-image: linear-gradient(to right, #FEFDF2D0 55%, #A8A08F 60%, #FEFDF2D0 65%);
  }
  70% { 
  background-image: linear-gradient(to right, #FEFDF2D0 65%, #A8A08F 70%, #FEFDF2D0 75%);
  }
  80% { 
  background-image: linear-gradient(to right, #FEFDF2D0 75%, #A8A08F 80%, #FEFDF2D0 85%);
  }
  90% { 
  background-image: linear-gradient(to right, #FEFDF2D0 85%, #A8A08F 90%, #FEFDF2D0 95%);
  }
  100% { 
  background-image: linear-gradient(to right, #FEFDF2D0 95%, #A8A08F);
  }
}