JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="loader">
  <div class="ring"></div>
  <span class="isLoaded">LOADING...</span>
</div>

CSS

#loader {
   position: fixed;
   display: flex;
   align-items: center;
   align-self: center;
   justify-content: center;
   background-color: #02171C;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   /* 1 second opacity ease transition */
   transition: opacity 1s ease;
 }

 .disappear {
   opacity: 0;
   pointer-events: none;
 }

 .ring {
   position: absolute;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   animation: ring 1.5s linear infinite;
 }

 .ring:before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   box-shadow: 0 0 10px #6497373b;
   border-radius: 50%;
 }

 span {
   color: #649737;
   font-size: 20px;
   letter-spacing: 1px;
   line-height: 200px;
 }

JavaScript

// our loader div by id (not class)
let loader = document.getElementById('loader');

// on window loaded
window.onload = (event) => {

  console.log('window loaded, and wait 3 secs for example #loader div to disappear');

  // for demo example 3 seconds for page load
  setTimeout(function() {

    // add disappear class to #loader div
    loader.classList.add("disappear");

    console.log('disappear class added to #loader element');

    // after 1 second css transition opacity disappear has completed
    // plus an extra 250 milliseconds so not to remove #loader before transition is complete
    setTimeout(function() {

      // remove #loader elem from DOM entirely
      loader.remove();

      console.log('#loader div element removed from dom');

    // 1 second and 250 milliseconds delay
    }, 1250);

  // 3 seconds delay
  }, 3000);

};