.j-mask {
  z-index: 9999;

  &.white-mask {
    background-color: rgba($--color-c6, 1);
  }

  .loading {
    width: 150px;
    height: 16px;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    span {
      display: inline-block;
      width: 15px;
      height: 100%;
      margin-right: 5px;
      background-color: #7b7b7b;
      -webkit-animation: load 1.04s ease infinite;
      animation: load 1.04s ease infinite;

      &:last-child {
        margin-right: 0px;
      }

      &:nth-child(1) {
        -webkit-animation-delay: 0.13s;
        -moz-animation-delay: 0.13s;
        -ms-animation-delay: 0.13s;
        -o-animation-delay: 0.13s;
        animation-delay: 0.13s;
      }

      &:nth-child(2) {
        -webkit-animation-delay: 0.26s;
        -moz-animation-delay: 0.26s;
        -ms-animation-delay: 0.26s;
        -o-animation-delay: 0.26s;
        animation-delay: 0.26s;
      }

      &:nth-child(3) {
        -webkit-animation-delay: 0.39s;
        -moz-animation-delay: 0.39s;
        -ms-animation-delay: 0.39s;
        -o-animation-delay: 0.39s;
        animation-delay: 0.39s;
      }

      &:nth-child(4) {
        -webkit-animation-delay: 0.52s;
        -moz-animation-delay: 0.52s;
        -ms-animation-delay: 0.52s;
        -o-animation-delay: 0.52s;
        animation-delay: 0.52s;
      }

      &:nth-child(5) {
        -webkit-animation-delay: 0.65s;
        -moz-animation-delay: 0.65s;
        -ms-animation-delay: 0.65s;
        -o-animation-delay: 0.65s;
        animation-delay: 0.65s;
      }

    }

  }
}

@keyframes load {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.2;
  }
}

@-webkit-keyframes load {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.2;
  }
}

@-moz-keyframes load {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.2;
  }
}

@-ms-keyframes load {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.2;
  }
}

@-o-keyframes load {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.2;
  }
}
