How to add Loader/Spinner into your website home page with live example

To Add Loader Into Your website
Add this code into your HTML page that may be index.html or index.php

@keyframes lds-cube {
  0% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes lds-cube {
  0% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.lds-cube {
  position: relative;
}
.lds-cube div {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 10px;
  left: 10px;
  background: #3be8b0;
  -webkit-animation: lds-cube 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-cube 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.36s;
  animation-delay: -0.36s;
}
.lds-cube div:nth-child(2) {
  top: 10px;
  left: 110px;
  background: #1aafd0;
  -webkit-animation-delay: -0.24s;
  animation-delay: -0.24s;
}
.lds-cube div:nth-child(3) {
  top: 110px;
  left: 110px;
  background: #ffb900;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.lds-cube div:nth-child(4) {
  top: 110px;
  left: 10px;
  background: #6a67ce;
  -webkit-animation-delay: -0.12s;
  animation-delay: -0.12s;
}
.lds-cube {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

Add this code into your webpage javascript section

window.onload=function(){

document.getElementById('hide-spiner').style.display='none'

}