@-webkit-keyframes loading {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 99999;
  background: var(--loading-bg-color);

  .box {
    h2 {
      color: #777;
      margin: 0;
      font: 0.8em verdana;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-align: center;
    }

    span {
      display: inline-block;
      vertical-align: middle;
      width: 0.6em;
      height: 0.6em;
      margin: 0.19em;
      background: #007db6;
      border-radius: 0.6em;
      -webkit-animation: loading 1s infinite alternate;
      animation: loading 1s infinite alternate;

      &:nth-of-type(2) {
        background: #008fb2;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
      }

      &:nth-of-type(3) {
        background: #009b9e;
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
      }

      &:nth-of-type(4) {
        background: #00a77d;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
      }

      &:nth-of-type(5) {
        background: #00b247;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
      }

      &:nth-of-type(6) {
        background: #5ab027;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
      }

      &:nth-of-type(7) {
        background: #a0b61e;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
      }
    }
  }
}