Unfolding Cube Loader: Pure CSS Loading Animation

Unfolding Cube Loader

A cube on a turning floor opens flat into its cross-shaped net, then folds back up with the lid closing last. Each side hinges on its own edge through transform-origin inside one preserve-3d floor.

Also known as: cube net animation, opening box loader, cube unfold 3d.

Color Size 64px Dark background

HTML

<div class="ldr-unfolding-cube" role="status" aria-label="Loading">
  <div class="ldr-unfolding-cube-floor">
    <span></span>
    <span style="--x: 1; --y: 0"></span>
    <span style="--x: 0; --y: -1"></span>
    <span style="--x: 0; --y: 1"></span>
    <span style="--x: -1; --y: 0"><span style="--x: -1; --y: 0"></span></span>
  </div>
</div>

CSS

.ldr-unfolding-cube {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --a: calc(var(--s) * 0.44);
  display: grid;
  place-items: center;
  width: calc(var(--s) * 2);
  height: calc(var(--s) * 1.3);
  perspective: calc(var(--s) * 8);
}
.ldr-unfolding-cube-floor {
  position: relative;
  width: var(--a);
  height: var(--a);
  margin-top: calc(var(--s) * 0.3);
  transform-style: preserve-3d;
  animation: ldr-unfolding-cube-spin 7.2s linear infinite;
}
.ldr-unfolding-cube span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--a);
  height: var(--a);
  background: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, #000);
  transform-style: preserve-3d;
  animation: ldr-unfolding-cube-hinge 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-unfolding-cube-floor > span:nth-child(1) {
  background: color-mix(in srgb, var(--c) 45%, #000);
  animation: none;
}
.ldr-unfolding-cube-floor > span:nth-child(2) {
  top: 100%;
  transform-origin: 50% 0;
}
.ldr-unfolding-cube-floor > span:nth-child(3) {
  left: 100%;
  transform-origin: 0 50%;
  background: color-mix(in srgb, var(--c) 72%, #000);
}
.ldr-unfolding-cube-floor > span:nth-child(4) {
  left: -100%;
  transform-origin: 100% 50%;
  background: color-mix(in srgb, var(--c) 68%, #fff);
}
.ldr-unfolding-cube-floor > span:nth-child(5) {
  top: -100%;
  transform-origin: 50% 100%;
  background: color-mix(in srgb, var(--c) 58%, #000);
}
.ldr-unfolding-cube span span {
  top: -100%;
  transform-origin: 50% 100%;
  background: color-mix(in srgb, var(--c) 50%, #fff);
  animation-delay: -3.42s;
}
@keyframes ldr-unfolding-cube-hinge {
  0%, 14%, 84%, 100% { transform: rotateX(calc(var(--x) * 90deg)) rotateY(calc(var(--y) * 90deg)); }
  38%, 60%           { transform: rotateX(0deg) rotateY(0deg); }
}
@keyframes ldr-unfolding-cube-spin {
  from { transform: rotateX(58deg) rotateZ(0deg); }
  to   { transform: rotateX(58deg) rotateZ(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-unfolding-cube, .ldr-unfolding-cube *, .ldr-unfolding-cube::before, .ldr-unfolding-cube::after, .ldr-unfolding-cube *::before, .ldr-unfolding-cube *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Unfolding Cube Loader

HTML

CSS

Customizing this loader

Similar loaders