<figure>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</figure>
  <a style="all:unset;font-family: Roboto, arial, sans-serif;font-size: 20px;width: 100%;text-align: center;display: block;background: linear-gradient(135deg,#001634 10%,#2e143e);line-height: 50px;color: white;position: absolute;top: 0;left: 0;right: 0;text-decoration: none;cursor:pointer;z-index: 9999;" target="_blank" href="https://appcode.app/how-to-make-an-html-loader-spinner-appear-and-disappear/">Made With ❤️ Click this banner to checkout the tutorial --></a>

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #121214;
  background-image: -webkit-linear-gradient(#121214, #343437);
  background-image: linear-gradient(#121214, #343437);
}

figure {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  margin: -60px -50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 600;
  -moz-perspective: 600;
  perspective: 600;
}

figure span {
  display: block;
  position: absolute;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

figure span:after {
  display: block;
  content: "";
  border-style: solid;
  border-color: transparent;
  border-width: 100px 58px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure span:nth-child(1) {
  -webkit-transform: rotate3d(0, 0, 1, 90deg);
  -moz-transform: rotate3d(0, 0, 1, 90deg);
  -ms-transform: rotate3d(0, 0, 1, 90deg);
  -o-transform: rotate3d(0, 0, 1, 90deg);
  transform: rotate3d(0, 0, 1, 90deg);
}

figure span:nth-child(1):after {
  border-top-color: #eaff00;
  -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  -ms-transform: rotate3d(0.5, 1, 0, 180deg);
  -o-transform: rotate3d(0.5, 1, 0, 180deg);
  transform: rotate3d(0.5, 1, 0, 180deg);
  -webkit-animation: split 2s 0.1111111111s ease infinite;
  -moz-animation: split 2s 0.1111111111s ease infinite;
  animation: split 2s 0.1111111111s ease infinite;
}

figure span:nth-child(2) {
  -webkit-transform: rotate3d(0, 0, 1, 150deg);
  -moz-transform: rotate3d(0, 0, 1, 150deg);
  -ms-transform: rotate3d(0, 0, 1, 150deg);
  -o-transform: rotate3d(0, 0, 1, 150deg);
  transform: rotate3d(0, 0, 1, 150deg);
}

figure span:nth-child(2):after {
  border-top-color: #d5ff00;
  -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  -ms-transform: rotate3d(0.5, 1, 0, 180deg);
  -o-transform: rotate3d(0.5, 1, 0, 180deg);
  transform: rotate3d(0.5, 1, 0, 180deg);
  -webkit-animation: split 2s 0.2222222222s ease infinite;
  -moz-animation: split 2s 0.2222222222s ease infinite;
  animation: split 2s 0.2222222222s ease infinite;
}

figure span:nth-child(3) {
  -webkit-transform: rotate3d(0, 0, 1, 210deg);
  -moz-transform: rotate3d(0, 0, 1, 210deg);
  -ms-transform: rotate3d(0, 0, 1, 210deg);
  -o-transform: rotate3d(0, 0, 1, 210deg);
  transform: rotate3d(0, 0, 1, 210deg);
}

figure span:nth-child(3):after {
  border-top-color: #bfff00;
  -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  -ms-transform: rotate3d(0.5, 1, 0, 180deg);
  -o-transform: rotate3d(0.5, 1, 0, 180deg);
  transform: rotate3d(0.5, 1, 0, 180deg);
  -webkit-animation: split 2s 0.3333333333s ease infinite;
  -moz-animation: split 2s 0.3333333333s ease infinite;
  animation: split 2s 0.3333333333s ease infinite;
}

figure span:nth-child(4) {
  -webkit-transform: rotate3d(0, 0, 1, 270deg);
  -moz-transform: rotate3d(0, 0, 1, 270deg);
  -ms-transform: rotate3d(0, 0, 1, 270deg);
  -o-transform: rotate3d(0, 0, 1, 270deg);
  transform: rotate3d(0, 0, 1, 270deg);
}

figure span:nth-child(4):after {
  border-top-color: #aaff00;
  -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  -ms-transform: rotate3d(0.5, 1, 0, 180deg);
  -o-transform: rotate3d(0.5, 1, 0, 180deg);
  transform: rotate3d(0.5, 1, 0, 180deg);
  -webkit-animation: split 2s 0.4444444444s ease infinite;
  -moz-animation: split 2s 0.4444444444s ease infinite;
  animation: split 2s 0.4444444444s ease infinite;
}

figure span:nth-child(5) {
  -webkit-transform: rotate3d(0, 0, 1, 330deg);
  -moz-transform: rotate3d(0, 0, 1, 330deg);
  -ms-transform: rotate3d(0, 0, 1, 330deg);
  -o-transform: rotate3d(0, 0, 1, 330deg);
  transform: rotate3d(0, 0, 1, 330deg);
}

figure span:nth-child(5):after {
  border-top-color: #95ff00;
  -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  -ms-transform: rotate3d(0.5, 1, 0, 180deg);
  -o-transform: rotate3d(0.5, 1, 0, 180deg);
  transform: rotate3d(0.5, 1, 0, 180deg);
  -webkit-animation: split 2s 0.5555555556s ease infinite;
  -moz-animation: split 2s 0.5555555556s ease infinite;
  animation: split 2s 0.5555555556s ease infinite;
}

figure span:nth-child(6) {
  -webkit-transform: rotate3d(0, 0, 1, 390deg);
  -moz-transform: rotate3d(0, 0, 1, 390deg);
  -ms-transform: rotate3d(0, 0, 1, 390deg);
  -o-transform: rotate3d(0, 0, 1, 390deg);
  transform: rotate3d(0, 0, 1, 390deg);
}

figure span:nth-child(6):after {
  border-top-color: #80ff00;
  -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  -ms-transform: rotate3d(0.5, 1, 0, 180deg);
  -o-transform: rotate3d(0.5, 1, 0, 180deg);
  transform: rotate3d(0.5, 1, 0, 180deg);
  -webkit-animation: split 2s 0.6666666667s ease infinite;
  -moz-animation: split 2s 0.6666666667s ease infinite;
  animation: split 2s 0.6666666667s ease infinite;
}

@-webkit-keyframes split {
  0% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  }

  25% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
  }

  75% {
    opacity: 0;
    -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
  }
}

@-moz-keyframes split {
  0% {
    -moz-transform-origin: 50% 100%;
    -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  }

  25% {
    -moz-transform-origin: 50% 100%;
    -moz-transform: rotate3d(0, 1, 0, 360deg);
  }

  50% {
    opacity: 1;
    -moz-transform-origin: 100% 0%;
    -moz-transform: rotate3d(0, 1, 0, 360deg);
  }

  75% {
    opacity: 0;
    -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  }

  100% {
    opacity: 1;
    -moz-transform: rotate3d(0.5, 1, 0, 180deg);
  }
}

@keyframes split {
  0% {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
    -moz-transform: rotate3d(0.5, 1, 0, 180deg);
    -ms-transform: rotate3d(0.5, 1, 0, 180deg);
    -o-transform: rotate3d(0.5, 1, 0, 180deg);
    transform: rotate3d(0.5, 1, 0, 180deg);
  }

  25% {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
    -moz-transform: rotate3d(0, 1, 0, 360deg);
    -ms-transform: rotate3d(0, 1, 0, 360deg);
    -o-transform: rotate3d(0, 1, 0, 360deg);
    transform: rotate3d(0, 1, 0, 360deg);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
    -moz-transform: rotate3d(0, 1, 0, 360deg);
    -ms-transform: rotate3d(0, 1, 0, 360deg);
    -o-transform: rotate3d(0, 1, 0, 360deg);
    transform: rotate3d(0, 1, 0, 360deg);
  }

  75% {
    opacity: 0;
    -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
    -moz-transform: rotate3d(0.5, 1, 0, 180deg);
    -ms-transform: rotate3d(0.5, 1, 0, 180deg);
    -o-transform: rotate3d(0.5, 1, 0, 180deg);
    transform: rotate3d(0.5, 1, 0, 180deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: rotate3d(0.5, 1, 0, 180deg);
    -moz-transform: rotate3d(0.5, 1, 0, 180deg);
    -ms-transform: rotate3d(0.5, 1, 0, 180deg);
    -o-transform: rotate3d(0.5, 1, 0, 180deg);
    transform: rotate3d(0.5, 1, 0, 180deg);
  }
}