.global-loading {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.global-loading-container {
  width: 40px;
  height: 80px;
  transition: 1.5s all ease-out;
}

.global-loading-preloader {
  position: relative;
  width: 40px;
  height: 40px;
}

.global-loading-preloader span {
  display: block;
  bottom: 0px;
  width: 20px;
  height: 20px;
  background: #9b59b6;
  position: absolute;
}

.global-loading-preloader span:nth-child(1) {
  animation: preloader_1 1.5s infinite ease-in-out;
}

.global-loading-preloader span:nth-child(2) {
  left: 20px;
  animation: preloader_2 1.5s infinite ease-in-out;

}

.global-loading-preloader span:nth-child(3) {
  top: 0px;
  animation: preloader_3 1.5s infinite ease-in-out;
}

.global-loading-preloader span:nth-child(4) {
  top: 0px;
  left: 20px;
  animation: preloader 1.5s infinite ease-in-out;
}

@keyframes preloader_1 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    border-radius: 0px;
  }

  50% {
    transform: translateX(-20px) translateY(-10px) rotate(-180deg);
    border-radius: 20px;
    background: #3498db;
  }

  80% {
    transform: translateX(0px) translateY(0px) rotate(-360deg);
    border-radius: 0px;
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(-360deg);
    border-radius: 0px;
  }
}

@keyframes preloader_2 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    border-radius: 0px;
  }

  50% {
    transform: translateX(20px) translateY(-10px) rotate(180deg);
    border-radius: 20px;
    background: #f1c40f;
  }

  80% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
    border-radius: 0px;
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
    border-radius: 0px;
  }
}

@keyframes preloader_3 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    border-radius: 0px;
  }

  50% {
    transform: translateX(-20px) translateY(10px) rotate(-180deg);
    border-radius: 20px;
    background: #2ecc71;
  }

  80% {
    transform: translateX(0px) translateY(0px) rotate(-360deg);
    border-radius: 0px;
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(-360deg);
    border-radius: 0px;
  }
}


@keyframes preloader {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    border-radius: 0px;
  }

  50% {
    transform: translateX(20px) translateY(10px) rotate(180deg);
    border-radius: 20px;
    background: #e74c3c;
  }

  80% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
    border-radius: 0px;
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
    border-radius: 0px;
  }
}