3D Box Loader Animation | HTML, CSS & JavaScript

:root {
  --size: 80px;
  --speed: 8s;
  /* Google Colors */
  --g-blue: #4285F4;
  --g-red: #EA4335;
  --g-yellow: #FBBC05;
  --g-green: #34A853;
}

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.scene {
  width: var(--size);
  height: var(--size);
  perspective: 1200px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: fullRotate var(--speed) infinite linear;
}

.face {
  position: absolute;
  width: var(--size);
  height: var(--size);
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 20px currentColor;
  animation: flyInOut var(--speed) infinite ease-in-out;
}

/* Positions & Delays */
.front {
  color: var(--g-blue);
  background: rgba(66, 133, 244, 0.7);
  --final: rotateY(0deg) translateZ(40px);
  animation-delay: 0.0s;
}

.back {
  color: var(--g-red);
  background: rgba(234, 67, 53, 0.7);
  --final: rotateY(180deg) translateZ(40px);
  animation-delay: 0.4s;
}

.right {
  color: var(--g-yellow);
  background: rgba(251, 188, 5, 0.7);
  --final: rotateY(90deg) translateZ(40px);
  animation-delay: 0.8s;
}

.left {
  color: var(--g-green);
  background: rgba(52, 168, 83, 0.7);
  --final: rotateY(-90deg) translateZ(40px);
  animation-delay: 1.2s;
}

.top {
  color: var(--g-blue);
  background: rgba(66, 133, 244, 0.7);
  --final: rotateX(90deg) translateZ(40px);
  animation-delay: 1.6s;
}

.bottom {
  color: var(--g-red);
  background: rgba(234, 67, 53, 0.7);
  --final: rotateX(-90deg) translateZ(40px);
  animation-delay: 2.0s;
}

@keyframes flyInOut {

/* 1. FLY IN: From distance to center */
  0% {
    opacity: 0;
    transform: var(--final) translateZ(400px) rotateZ(180deg) scale(0);
  }

/* 2. ASSEMBLE: The box is complete and visible */
  30%,
  70% {
    opacity: 1;
    transform: var(--final) translateZ(0) rotateZ(0deg) scale(1);
  }

/* 3. FLY OUT: Each piece flies away further than it started */
  90%,
  100% {
    opacity: 0;
    transform: var(--final) translateZ(500px) rotateZ(-180deg) scale(2);
  }
}

@keyframes fullRotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

- 3D Box Loader Animation

Live Preview