spinner.html

<div class="webpack m-auto ">
    <div class="webpack-logo">
        <div class="cube_wrapper">
            <div class="cube cube1">
                <div class="face face_top"></div>
                <div class="face face_bottom"></div>
                <div class="face face_side_1"></div>
                <div class="face face_side_2"></div>
                <div class="face face_side_3"></div>
                <div class="face face_side_4"></div>
            </div>
            <div class="cube cube2">
                <div class="face face_top"></div>
                <div class="face face_bottom"></div>
                <div class="face face_side_1"></div>
                <div class="face face_side_2"></div>
                <div class="face face_side_3"></div>
                <div class="face face_side_4"></div>
            </div>
        </div>
    </div>
</div>
<style>
    .webpack-logo {
  display: inline-block;
  vertical-align: middle;
}


.cube_wrapper {
  width: auto;
  margin: 0 auto;
  position: relative;
  display: block;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
  transform: rotateX(-33.5deg) rotateY(45deg);
}

.cube {
  display: inline-block;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}

.cube1 {
  width: 120px;
  height: 120px;
  z-index:9;
}

.cube1 .face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-color: #fff;
  border-style: solid;
/*   background: rgba(141, 214, 249, 0.5); */
  transition: border-width 0.2s 0.3s;
}

.face_top {
  transform: rotateX(90deg) translateZ(60px);
  border-width: 6px 6px 1px 1px;
}

.face_bottom {
  transform: rotateX(-90deg) translateZ(60px);
  border-width: 5px;
}

.face_side_1 {
  border-width: 1px;
  transform: rotateX(0deg) translateZ(-60px);
}

.face_side_2 {
  transform: rotateX(0deg) translateZ(60px);
  border-width: 1px 6px 6px 1px;
}

.face_side_3 {
  transform: rotateY(-90deg) translateZ(60px);
  border-width: 1px 1px 6px 6px;
}

.face_side_4 {
  transform: rotateY(-90deg) translateZ(-60px);
  border-width: 6px 6px 1px 1px;
}

.cube2 {
  z-index:10;
  width: 120px;
  height: 120px;
  position: absolute;
  top: calc(50% - 3px);
  left: 50%;
  transform: translate(-50%, -50%) scale3d(0.5, 0.5, 0.5);
  display: inline-block;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cube2 .face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 10px solid #ffffff;
/*   background: #175d96; */
}
</style>
<script>
    var set_interval;
var interval_delay = 2000;
var interval_running = false;

var i = 0;
var rotateValue1 = 90;
var rotateValue2 = -90;
var topFace = [
    "5px 5px 5px 5px",
    "5px 5px 5px 5px",
    "5px 5px 5px 5px",
    "5px 5px 5px 5px"
];
var side1 = ["5px 5px 5px 5px", "5px 5px 5px 5px", "5px", "5px"];
var side2 = ["5px", "5px", "5px 5px 5px 5px", "5px 5px 5px 5px"];
var side3 = ["5px 5px 5px 5px", "5px", "5px", "5px 5px 5px 5px"];
var side4 = ["5px", "5px 5px 5px 5px", "5px 5px 5px 5px", "5px"];

document.querySelector("body").onload = function () {
    webpackAnimation();
    set_interval = setInterval(webpackAnimation, interval_delay);
};

function webpackAnimation() {
    interval_running = true;

    document.querySelector(".cube1").style.transform =
        "rotateY(" + rotateValue1 + "deg)";
    if (i > 3) {
        i = 0;
    }

    document.querySelector(".cube1 .face_top").style.borderWidth = topFace[i];
    document.querySelector(".cube1 .face_side_1").style.borderWidth = side1[i];
    document.querySelector(".cube1 .face_side_2").style.borderWidth = side2[i];
    document.querySelector(".cube1 .face_side_3").style.borderWidth = side3[i];
    document.querySelector(".cube1 .face_side_4").style.borderWidth = side4[i];

    rotateValue1 = rotateValue1 + 90;
    i++;

    document.querySelector(".cube2").style.transform =
        "translate(-50%, -50%) scale3d(0.5, 0.5, 0.5) rotateY(" +
        rotateValue2 +
        "deg)";

    rotateValue2 = rotateValue2 - 90;
}


var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
    if (document[hidden]) {
        clearInterval(set_interval);
        interval_running = false;
    } else {
        clearInterval(set_interval);
        if (!interval_running)
            set_interval = setInterval(webpackAnimation, interval_delay);
    }
}


if (
    typeof document.addEventListener === "undefined" ||
    typeof document[hidden] === "undefined"
) {
    alert(
        "This demo requires a modern browser that supports the Page Visibility API."
    );
} else {
    
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
</script>