how to make loading spinner javascript

Question

I want to basically create a loading spinner for when my page is loading in javascript. Sometimes, the page takes long to load based on connection and I would just like to show a loading spinner while it loads.

I'm not sure where to start, I will show my main HTML/EJS code to show where I would need it. Thanks in advance for the help!

$(window).load(function() {
    $('#loading').hide();
  });

.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color : #0e086b;
  z-index: 99;
  text-align: center;
  }
#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
  <div class="loader">
    <div class="inner one"></div>
    <div class="inner two"></div>
    <div class="inner three"></div>
  </div>
</div>

Answer 1

simply remove the anim !

on the real DOMContentLoaded event

window.addEventListener('DOMContentLoaded', (event) =>
  {
  let LoadAnim = document.getElementById('loading')
  document.body.remove(LoadAnim)
  }
);

sample code :
(simply click on snippet to stop the animation)

document.body.onclick = () =>  // simulate DOMContentLoaded event
  {
  let LoadAnim = document.getElementById('loading')
  document.body.remove(LoadAnim)
  }

#loading {
  display          : block;
  position         : fixed;
  top              : 0;
  left             : 0;
  width            : 100%;
  height           : 100%;
  background-color : #040030e7;
  z-index          : 99;
  }
#loading > div {
  position      : absolute;
  top           : calc(50% - 32px);
  left          : calc(50% - 32px);
  width         : 64px;
  height        : 64px;
  border-radius : 50%;
  perspective   : 800px;
  }
#loading > div > div {
  position      : absolute;
  box-sizing    : border-box;
  width         : 100%;
  height        : 100%;
  border-radius : 50%;  
  left          : 0%;
  top           : 0%;
  border-bottom : 3px solid #f5f125;
  }
#loading > div > div:nth-of-type(1) { animation : rotate-1 1s linear infinite;     }
#loading > div > div:nth-of-type(2) { animation : rotate-2 1s linear infinite .3s; }
#loading > div > div:nth-of-type(3) { animation : rotate-3 1s linear infinite .6s; }
@keyframes rotate-1 {
  0%   { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);   }
  100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
  }
@keyframes rotate-2 {
  0%   { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);   }
  100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
  }
@keyframes rotate-3 {
  0%   { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);   }
  100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
  }

<div id="loading"> <!-- loading annimation-->
  <div> <div></div> <div></div> <div></div> </div>
</div>

Answer 2

you can handle it manually. whenever you want to show a spinner you can call

$('#loading').show();

and to hide it after the ajax call use this in the callback function

$('#loading').hide();

The following solution will hide the spinner after 3 seconds, when the page loaded

$(document).ready(function() {
    setTimeout(function(){ $('#loading').hide(); }, 3000);
});

.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid green;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid green;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid green;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
  }
#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
  <div class="loader">
    <div class="inner one"></div>
    <div class="inner two"></div>
    <div class="inner three"></div>
  </div>
</div>