Add Preloader Gif and Text

Preloader CSS and Javascript. Even User Friendly Tutorial Text

css

.ct-preloader {
  position: fixed;
  z-index: 999998;
  width: 100vw;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}
.ct-preloader .ct-preloader-content {
  position: absolute;
  z-index: 99999;
  top: 50%;
  margin-top: -32px;
  left: 50%;
  margin-left: -32px;
  overflow: visible;
  width: 111px;
  height: 64px;
  font-size: 64px;
  background: url("../../images/preloader.gif") no-repeat;
}

html directly after undefined

<div class="ct-preloader"><div class="ct-preloader-content"></div></div>

javascript

(function ($) {
    "use strict";

    $(window).on("load", function () {
        var $preloader = $('.ct-preloader');
        var $content = $('.ct-preloader-content');

        var $timeout = setTimeout(function () {
            $($preloader).addClass('animated').addClass('fadeOut');
            $($content).addClass('animated').addClass('fadeOut');
        }, 0);
        var $timeout2 = setTimeout(function () {
            $($preloader).css('display', 'none').css('z-index', '-9999');
        }, 500);
    })

}(jQuery));