JSFiddle - React, Tailwind, and code Playground

by bigwelly

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.2/motion-ui.css">
<div id="preloader">
  <div id="loader">
    <div><img src="https://static-steelkiwi-dev.s3.amazonaws.com/media/filer_public/20/8d/208d6d8d-7690-4618-9aa1-5921c9285343/796131d5-3dda-45c7-a3e1-cffeaa820295.gif"></div>
  </div>
</div>

<body id='bdy'>
  <section id='about' class="s-about">

    <div class="grid-x grid-padding-x text-center">
      <div class="cell medium-10 medium-offset-1">
        <h1>Welcome to Foundation</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
      </div>
    </div>
  </section>
	</body>

CSS

body {
  display: none;
}

#preloader {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #172027;
  z-index: 800;
  height: 100%;
  width: 100%;
  display: table;
}

.no-js #preloader,
.oldie #preloader {
  display: none;
}

#loader {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

JavaScript

$(document).foundation();

(function($) {

  $WIN = $(window);

  // Add the User Agent to the <html>
  // will be used for IE10 detection (Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0))
  var doc = document.documentElement;
  doc.setAttribute('data-useragent', navigator.userAgent);


  /* Preloader
   * -------------------------------------------------- */
  var clPreloader = function() {

    $("html").addClass('cl-preload');

    $WIN.on('load', function() {

      //force page scroll position to top at page refresh
      // $('html, body').animate({ scrollTop: 0 }, 'normal');

      // will first fade out the loading animation 
      $("#loader").fadeOut("slow", function() {
        // will fade out the whole DIV that covers the website.
        $("#preloader").delay(300).fadeOut("slow");
      });

      // for hero content animations 
      $("html").removeClass('cl-preload');
      $("html").addClass('cl-loaded');

    });
  };

  /* Initialize
   * ------------------------------------------------------ */
  (function ssInit() {

    clPreloader();

    document.getElementById('bdy').style = "display:block";
  })();


})(jQuery);