PreLoad Screen

by davidxmartins

HTML

<div id="loading-screen" style="visibility:hidden;">
  <div class="loader"></div>
</div>


<h1>
PRELOAD SCREEN
</h1>
<h2>
The preload screen is triggered only one time, when the user visits the page for the fist time.<br><br>To see the screen again you need to copy the url for this page, close this page, clear the cach from the browser and access the this page again.
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

CSS

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  margin: auto;
  border: 40px solid #eee;
  border-radius: 50%;
  border-top: 40px solid green;
  width: 150px;
  height: 150px;
  animation: spinner 3s linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* unrelated */
body {font-family: sans-serif;}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var loadingScreen = document.getElementById("loading-screen");

    var visited = localStorage.getItem('visited');

    if (!visited) {
        loadingScreen.style.visibility = "visible";
        setTimeout(function() {
            loadingScreen.style.visibility = "hidden";
        }, 3000);
        localStorage.setItem('visited', "true");
    } else {
        loadingScreen.style.visibility = "hidden";
    }
});