JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<div class="parent"></div>

CSS

.parent {
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.parent::after {
  content: '';
  display: block;
  height: 100%;
  width: 200%;
  background: repeating-linear-gradient(-45deg, #fff, #fff 10px, #e2edc1 10px, #e2edc1 28px, #fff 28px);
  animation: pageloadingline 0.3s ease-in-out infinite;
}

@keyframes pageloadingline {
    0% { transform: translateX(-40px); }
    10% { transform: translateX(-36px); }
    20% { transform: translateX(-32px); }
    30% { transform: translateX(-28px); }
    40% { transform: translateX(-24px); }
    50% { transform: translateX(-20px); }
    60% { transform: translateX(-16px); }
    70% { transform: translateX(-12px); }
    80% { transform: translateX(-8px); }
    90% { transform: translateX(-4px); }
   }