@prefix: deye-loading;

.@{prefix} {
  &- {
    &root {
      position: relative;
      z-index: 1;
    }

    &loading-box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: center;
      transform: rotate(45deg) translate(-50%, -50%) scale(0.5);
      animation: deye-loading-fade-in 500ms
    }


    &dot {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 20px;
      height: 20px;
      background: rgba(200, 200, 200, 0.8);
      border-radius: 50%;
    }

    &a {
      animation: deye-loading-a 1s ease-in-out infinite;
      top: -40px;
      left: -40px;
    }

    &b {
      animation: deye-loading-b 1s ease-in-out infinite;
      top: -40px;
      left: 0px;
    }

    &c {
      animation: deye-loading-c 1s ease-in-out infinite;
      top: -40px;
      left: 40px;
    }

    &d {
      animation: deye-loading-d 1s ease-in-out infinite;
      top: 0px;
      left: -40px;
    }

    &e {
      animation: deye-loading-e 1s ease-in-out infinite;
      top: 0px;
      left: 0px;
    }

    &f {
      animation: deye-loading-f 1s ease-in-out infinite;
      top: 0px;
      left: 40px;
    }

    &g {
      animation: deye-loading-g 1s ease-in-out infinite;
      top: 40px;
      left: -40px;
    }

    &h {
      animation: deye-loading-h 1s ease-in-out infinite;
      top: 40px;
      left: 0px;
    }

    &i {
      animation: deye-loading-i 1s ease-in-out infinite;
      top: 40px;
      left: 40px;
    }
  }
}


@keyframes deye-loading-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes deye-loading-a {
  50% {
    top: 0px;
    left: -40px;
  }
  100% {
    top: 0px;
    left: -40px;
  }
}

@keyframes deye-loading-b {
  50% {
    top: -40px;
    left: -40px;
  }
  100% {
    top: -40px;
    left: -40px;
  }
}

@keyframes deye-loading-c {
  50% {
    top: -40px;
    left: 0px;
  }
  100% {
    top: -40px;
    left: 0px;
  }
}

@keyframes deye-loading-d {
  50% {
    top: 40px;
    left: -40px;
  }
  100% {
    top: 40px;
    left: -40px;
  }
}

@keyframes deye-loading-f {
  50% {
    top: -40px;
    left: 40px;
  }
  100% {
    top: -40px;
    left: 40px;
  }
}

@keyframes deye-loading-g {
  50% {
    top: 40px;
    left: 0px;
  }
  100% {
    top: 40px;
    left: 0px;
  }
}

@keyframes deye-loading-h {
  50% {
    top: 40px;
    left: 40px;
  }
  100% {
    top: 40px;
    left: 40px;
  }
}

@keyframes deye-loading-i {
  50% {
    top: 0px;
    left: 40px;
  }
  100% {
    top: 0px;
    left: 40px;
  }
}