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>