Code Playground

</div>
  <div class="typewriter">
    <h1>Loading Content.</h1>
  </div>
</div>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #00ffff;
}
#loading-page {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: /*#36435b*/ black;
  position: absolute;
  z-index: 6;
}
.robotContainer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
}
.mathRandomColors {
  height: 6px;
  width: 6px;
  border-radius: 50%;
}
.robotHead {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  width: 84px;
  height: fit-content;
  border-radius: 50px 50px 10px 10px;
  overflow: hidden;
  position: relative;
  animation: tilt 15s infinite;
}
.intenna {
  position: absolute;
  height: 30px;
  width: 3px;
  background: darkcyan;
  left: 30px;
  top: 25px;
  animation: tilt 15s infinite;
  border-radius: 30%;
}
.intenna:nth-child(2) {
  position: absolute;
  height: 40px;
  width: 3px;
  background: darkcyan;
  left: 45px;
  top: 10px;
}
.intenna .mathRandomColors {
  position: absolute;
  left: -1px;
  border-radius: 50%;
}
.eye {
  position: absolute;
  height: 15px;
  width: 15px;
  bottom: 15px;
  left: 35px;
  border-radius: 50%;
  background: pink;
}
.eye .eye {
  height: 10px;
  width: 10px;
  position: absolute;
  bottom: 2px;
  left: 2px;
  animation: greenDot 10s infinite;
}
.hologram {
  position: absolute;
  border-radius: 50%;
  bottom: 10px;
  left: 60px;
  height: 9px;
  width: 9px;
  background: cyan;
}
.lasers {
  animation: laserTilt 15s infinite;
  z-index: 1;
  position: absolute;
  top: 76px;
  left: -95px;
  width: 0;
  height: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #00ffff42;
  border-radius: 10px;
}
.robotBody {
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
  width: 120px;
  border-radius: 50%;
  overflow: hidden;
  animation: spin 15s infinite;
}
.typewriter {
  position: relative;
  animation: textPosition 15s infinite;
}
@keyframes textPosition {
  0% {
  }
  25% {
    margin-left: 115px;
  }
  50% {
    margin-right: 100px;
  }
  100% {
  }
}
.typewriter h1 {
  font-size: 21px;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: 0.15em solid white; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens 
  */
  margin-top: 20px;
  letter-spacing: 0.15em; /* Adjust as needed */
  animation: typing 5s steps(30, end), blink-caret 0.5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(360deg);
    margin-left: 100px;
  }
  50% {
    transform: rotate(-360deg);
    margin-right: 100px;
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
    margin-left: 111px;
  }
  50% {
    transform: rotate(5deg);
    margin-right: 111px;
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes laserTilt {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
    margin-left: 111px;
  }
  50% {
    transform: rotate(0deg);
    margin-right: 100px;
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes blink {
  0% {
    height: 11px;
  }
  5% {
    height: 0px;
  }
  6% {
    height: 11px;
  }
  100% {
    height: 11px;
  }
}
@keyframes greenDot {
  0% {
    height: 10px;
  }
  5% {
    height: 1px;
  }
  6% {
    height: 10px;
  }
  100% {
    height: 10px;
  }
}

let parentNode = document.getElementById("robotContainer");
let childNode = document.getElementsByClassName("mathRandomColors");
let eye = document.getElementsByClassName("eye");
let intenna = document.getElementsByClassName("intenna");
let typeWriter = document.getElementsByClassName("typewriter");
let colorArray = ["cyan", "darkcyan", "lightblue", "white", "aquamarine"];
/*state that i is equal to 0  and increase i by one like 1,2,3 etc as long as i is under the length of the child nodes being the divs with the class name of artPiece than pass in a random color from the colors variable colorArray and add a new random color per increment of i  */
var intervalId = window.setInterval(function () {
  for (var i = 0; i < childNode.length; i++) {
    childNode[i].style.backgroundColor =
      colorArray[Math.floor(Math.random() * colorArray.length)];
    /* console.log(childNode[i]);*/
  }
  /*change the color of the robot eye to a rondom color in the colors array*/
  eye[0].style.backgroundColor =
    colorArray[Math.floor(Math.random() * colorArray.length)];
  eye[1].style.backgroundColor =
    colorArray[Math.floor(Math.random() * colorArray.length)];
  intenna[1].style.backgroundColor =
    colorArray[Math.floor(Math.random() * colorArray.length)];
  intenna[0].style.backgroundColor =
    colorArray[Math.floor(Math.random() * colorArray.length)];
  typeWriter[0].style.color =
    colorArray[Math.floor(Math.random() * colorArray.length)];
}, 500);

Frontend Forever App