JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<div class="multi-file-loading-container">
  <div class="animation-container">
    <div class="skeleton-line-1"></div>
    <div class="skeleton-line-2"></div>
    <div class="skeleton-line-3"></div>
  </div>
</div>

CSS

.multi-file-loading-container {
  margin-top: 10px;
  padding: 10px;
}

.animation-container {
  height: 40px;
  overflow: hidden;
}

.animation-container [class^="skeleton-line-"] {
  position: relative;
  background-color: #f2f2f2;
  height: 10px;
  overflow: hidden;
}

.skeleton-line-1 {
  width: 156px;
}

.skeleton-line-2 {
  width: 235px;
}

.skeleton-line-3 {
  width: 200px;
}

.animation-container [class^="skeleton-line-"]:not(:last-of-type) {
  margin-bottom: 4px;
}

.animation-container [class^="skeleton-line-"]::after {
  content: ' ';
  display: block;
  animation: blockTextShine 1s linear infinite forwards;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: linear-gradient(to right, #f2f2f2 0%, #fafafa 20%, #f2f2f2 40%, #f2f2f2 100%);
  height: 10px;
}

@keyframes blockTextShine {
  0% {
    transform: translateX(-468px);
  }
  100% {
    transform: translateX(468px);
  }
}