JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="layers-list loading" id="LayersList">
  <div class="layer-skeletons">
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
    <div class="skeleton"></div>
  </div>
</div>

SCSS

// Function for converting a px based font-size to rem.
@function rem-calc($size) {
 @return $size /  16px * 1rem;
}


.layers-list.loading {

  .layer-skeletons {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    .skeleton {
      background: #f8f8f8;
      width: 100%;
      height: rem-calc(44px);
      margin-bottom: rem-calc(10px);
      border-radius: rem-calc(5px);
      position: relative;
      padding: rem-calc(10px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      animation-name: skeleton;
      animation-duration: 1200ms;
      animation-iteration-count: infinite;
      animation-fill-mode: both;

      &:before,
      &:after {
        content: "";
        display: block;
        background: #000;
        border-radius: rem-calc(5px);
      }

      &:before {
        width: 75%;
        height: rem-calc(20px);
      }

      &:after {
        width: rem-calc(20px);
        height: rem-calc(20px);
      }
    }

    @for $skeleton from 1 to 11 {
      $delay: 50ms;

      .skeleton:nth-child(#{$skeleton}) {
        animation-delay: $delay * $skeleton;
      }
    }

    .hide {
      .skeleton {
        animation-name: skeleton-hide;
      }
    }
  }
}


@keyframes skeleton {
  from {
    opacity: 1
  }

  to {
    opacity: 0.5
  }
}

@keyframes skeleton-hide {
  from {
    transform: translateY(1)
  }

  to {
    transform: translateY(0)
  }
}