.loader

  each i in [1, 2, 3]

    div

      each j in [1, 2, 3, 4, 5, 6]

        span

*, *:before, *:after {

  padding: 0;

  margin: 0;

  border: 0;

  box-sizing:border-box;

}

body {

  background-color: #121418;

  display: grid;

  place-items: center;

  min-height: 100vh;

  color: #ccc;

  font-family: sans-serif;

  font-size: 18px;

  perspective: 400px;

}

​

.loader {

  --size: 10vw;

  --gap: 1vw;

  --speed: 3s;

  position: relative;

  width: var(--size);

  height: var(--size);

  transform: rotateX(-30deg) rotateY(-40deg) rotateZ(0deg);

  transform-style: preserve-3d;

  animation: spin 30s infinite linear;

  div {

    position: absolute;

    width: var(--size);

    height: var(--size);

    transform-style: preserve-3d;

    &:nth-child(1) {

      translate: -100% 0;

      animation: cube1 var(--speed) infinite ease-in-out;

    }

    &:nth-child(2) {

      animation: cube2 var(--speed) infinite ease-in-out;

    }

    &:nth-child(3) {

      translate: 100% 0;

      animation: cube3 var(--speed) infinite ease-in-out;

    }

    span {

      position: absolute;

      inset: var(--gap);

      border: 2px solid rebeccapurple;

      box-shadow: inset 0 0 calc(var(--size) / 4) rebeccapurple;

      &:nth-child(1) {

        transform: translateZ(calc(var(--size) / 2 * -1 + var(--gap)));

      }

      &:nth-child(2) {

        transform: rotateY(90deg) translateZ(calc(var(--size) / 2 * -1 + var(--gap)));

      }

      &:nth-child(3) {

        transform: rotateY(180deg) translateZ(calc(var(--size) / 2 * -1 + var(--gap)));

      }

      &:nth-child(4) {

        transform: rotateY(270deg) translateZ(calc(var(--size) / 2 * -1 + var(--gap)));

      }

      &:nth-child(5) {

        transform: rotateX(90deg) translateZ(calc(var(--size) / 2 * -1 + var(--gap)));

      }

      &:nth-child(6) {

        transform: rotateX(270deg) translateZ(calc(var(--size) / 2 * -1 + var(--gap)));

      }

    }

  }

}

​

@keyframes cube1 {

  33% {

    transform: translateY(-100%);

  }

  66%{

    transform: translateX(200%) translateY(-100%)

  }

  100% {

    transform: translateX(200%) translateY(0%);

  }

}

@keyframes cube2 {

  0%, 33% {

    transform: translateX(0%);

  }

  66%, 100% {

    transform: translateX(-100%);

  }

}

@keyframes cube3 {

  0%, 48% {

    transform: translateX(0%);

  }

  66%, 100% {

    transform: translateX(-100%);

  }

}

​

@keyframes spin {

  to {

    transform: rotateX(-30deg) rotateY(-40deg) rotateZ(0deg) rotateY(-360deg);

  }

}