.loading-directive {
  position: relative;

  .loading-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 0;
    z-index: -100;
    font-size: 16px;
    transition: all 0.5s linear;
    text-align: center;
    padding-top: 10px;
  }

  &.loading {
    cursor: progress;

    &::before {
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      opacity: 0.2;
      z-index: 4;
    }

    & > .loading-content {
      opacity: 1;
      z-index: 5;

      animation-duration: 0.8s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-name: placeholderAnimate;
      background: rgba(255, 255, 255, 0.4);
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.6) 10%,
        rgba(255, 255, 255, 0.8) 30%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0) 100%
      );
      background-size: 1300px;
    }

    &.table,
    &.block {
      position: relative;
    }
  }
}

@keyframes placeholderAnimate {
  0% {
    background-position: -650px 0;
  }
  100% {
    background-position: 650px 0;
  }
}
