Smooth page loader. Fade out and fade in for all pages.

smoth-page-loader.js

!function() {
   var overlay;
   var timeout = setInterval(function(){
      if (document.body) {
         var style = document.createElement('style');
         style.innerText = '@keyframes preloader-spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}';
         document.head.appendChild(style);
         overlay = document.createElement('div');
         overlay.style.cssText = "position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background: #ffffff; opacity: 1; transition: opacity 0.3s ease-in, z-index 0.3s step-end";
         var preloader = document.createElement('img');
         preloader.setAttribute('src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#808080" d="M17.25 1.5c-.14-.06-.28-.11-.44-.11-.55 0-1 .45-1 1 0 .39.23.72.56.89l-.01.01c3.2 1.6 5.39 4.9 5.39 8.71 0 5.38-4.37 9.75-9.75 9.75S2.25 17.39 2.25 12c0-3.82 2.2-7.11 5.39-8.71v-.02c.33-.16.56-.49.56-.89 0-.55-.45-1-1-1-.16 0-.31.05-.44.11C2.9 3.43.25 7.4.25 12c0 6.49 5.26 11.75 11.75 11.75S23.75 18.49 23.75 12c0-4.6-2.65-8.57-6.5-10.5z"></path></svg>');
         preloader.style.cssText = "position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; animation: preloader-spin 1s linear infinite;";
         overlay.appendChild(preloader);
         document.body.appendChild(overlay);
         clearInterval(timeout);
      }
   }, 1);
   
   window.addEventListener('load', function () {
      overlay.style.opacity = '0';
      overlay.style.zIndex = '-1';
   });

   function handleClick(e){
      var href = e.target.getAttribute('href');
      if (href.indexOf('#') === 0) {
         return;
      }
      if (href.indexOf('javascript:') === 0) {
         return;
      }
      e.preventDefault();
      document.body.style.cssText = "opacity: 1; transition: opacity 0.3s ease-in;";
      document.body.style.opacity = '0';
      setTimeout(function () {
         window.location.href = href;
      }, 300);
   }
   
   document.addEventListener('DOMContentLoaded', function(){
      var links = document.getElementsByTagName('a');
      for (key in links){
         if (links.hasOwnProperty(key)) {
            links[key].addEventListener('click', handleClick);
         }
      }
   });
}();