.loading.loaded {
  display: none;
}

.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  z-index: 10000;
  background-color: #f6f8fc;
}

.loading .loading-box {
  margin: auto;
}

.loading .loading-box div {
  background-color: #5d34bc;
  position: fixed;
  border-radius: 5px;
  width: 27px;
}

.loading .loading-box .load-el1,
.loading .loading-box .load-el4 {
  height: 20px;
}

.loading .loading-box .load-el2,
.loading .loading-box .load-el3 {
  height: 34px;
}

.loading .loading-box .load-el1 {
  opacity: 0;
  margin-left: -15px;
  margin-top: -15px;
  animation: fade 1.5s infinite;
}

.loading .loading-box .load-el2 {
  opacity: 0;
  margin-left: -15px;
  margin-top: 8px;
  animation: move-bottom 1.5s infinite;
  animation-delay: 0.1s;
}

.loading .loading-box .load-el3 {
  opacity: 0;
  margin-left: 15px;
  margin-top: -15px;
  animation: move-top 1.5s infinite;
  animation-delay: 0.25s;
}

.loading .loading-box .load-el4 {
  opacity: 0;
  margin-left: 15px;
  margin-top: 22px;
  animation: move-bottom-2 1.5s infinite;
  animation-delay: 0.5s;
}

@keyframes move-bottom {
  0% {
    transform: translateY(32px);
    opacity: 0;
  }
  75% {
    transform: translateY(0px);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes move-bottom-2 {
  0% {
    transform: translateY(32px);
    opacity: 0;
  }
  75% {
    transform: translateY(0px);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

@keyframes move-top {
  0% {
    transform: translateY(-32px);
    opacity: 0;
  }
  75% {
    transform: translateY(0px);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}