<div class="loader abs-center">
  <div class="sq-wrapper">
    <div class="sq-box">
      <div class="sq-fill"></div>
    </div>
    <div class="sq-box">
      <div class="sq-fill"></div>
    </div>
    <div class="sq-box">
      <div class="sq-fill"></div>
    </div>
    <div class="sq-box">
      <div class="sq-fill"></div>
    </div>
    <div class="sq-box">
      <div class="sq-fill"></div>
    </div>
    <div class="sq-box">
      <div class="sq-fill"></div>
    </div>
  </div>
</div>

<div class="credits">
 <a href="https://goo.gl/m4WEu3" target="_blank"><img src="http://svencreations.com/collage.gif" alt="Sven Creations"/></a>
</div>

<!-- You can add more options if you want... Check here https://greensock.com/ease-visualizer -->
<div class="easeOptions"><select id="green">
  <optgroup label="EaseOptions">
    <option>Back.easeIn</option>
    <option selected="selected">Linear.easeNone</option>
    <option>SlowMo.ease</option>
    <option>Expo.easeIn</option>
    <option>Bounce.easeIn</option>
    <option>Elastic.easeOut</option>
    <option>Expo.easeOut</option>
    <option>Bounce.easeOut</option>
    <option>Bounce.easeInOut</option>
    <option>Back.easeInOut</option>
    <option>Expo.easeInOut</option>
    <option>Elastic.easeInOut</option>
  </optgroup>
</select></div>
body {
  background: none #000;
}

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%); /* IE 9 */
    -webkit-transform: translate(-50%,-50%); /* Safari */
    -moz-transform: translate(-50%,-50%); /* Firefox Older versions*/
    -o-transform: translate(-50%,-50%); /* Opera */
    transform: translate(-50%,-50%);
}
/* box fall preloader */
.sq-wrapper {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    text-align: center;
}

.sq-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none transparent;
    overflow: hidden;
  
}

.sq-fill {
    background: none #FD4401;
    width: 100%;
    height: 100%;
}

.loader > div::after {
    content: "LOADING ASSETS";
    position: absolute;
    white-space: nowrap;
    top: 2.25em;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
    letter-spacing: 0.125em;
    font-size: 1.075em;
    color: #fff;
    font-family: 'Dosis', sans-serif;
}

.credits {
  position: absolute;
  left: 1%;
  bottom: 2%;
  color: #41365C;
  display: none;
  overflow: hidden;
}

a {
  color: #41365C !important;
  margin-left: -6px;
}

.easeOptions {
  position: absolute;
  top: 2%;
  right: 2%;
}

select {
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>");
  background-color:#F5BA31;
  background-repeat:no-repeat;
  background-position: right 10px top 15px;
  background-size: 16px 16px;
  color:white;
  padding:12px;
  width:auto;
  font-family:arial,tahoma;
  font-size:16px;
  font-weight:bold;
  color:#FFF;
  text-align:center;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
  border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-appearance: none;
  border:0;
  outline:0;
  -webkit-transition:0.3s ease all;
	   -moz-transition:0.3s ease all;
	    -ms-transition:0.3s ease all;
	     -o-transition:0.3s ease all;
	        transition:0.3s ease all;
}

.easeOptions {
  display: none;
}

#green {
  background-color:#0A71A0;
}

#green:hover {
  background-color:#0A71A0;
}

select:focus, select:active {
  border:0;
  outline:0;
}
preloaderTL = new TimelineMax();

// Variables
var boxes = $('.sq-box'),
    squareFills = $('.sq-fill'),
    xMin = 10,
    xMax = 200,
    yMin = 150,
    yMax = 200,
    randomX, labelTime, $currentFill, timeline = {};
TweenMax.set(squareFills, {
    y: "104%"
});

function initPreloader(easeOption) {
    boxes.each(function(index, element) {
        if ((index % 2) == 0) {
            randomX = randomInt(-xMax, -xMin);
        } else {
            randomX = randomInt(xMin, xMax);
        }

        labelTime = index * 0.75;
        var $currentFill = $(this).find('.sq-fill');

        // create a new timeline which repeats itself
        timeline["sven-" + index] = new TimelineMax({
            repeat: -1,
            repeatDelay: 0.75,
            yoyo: false
        })

        // Animation starts here
        timeline["sven-" + index].to($currentFill, 0.75, {
            y: "0%",
            backgroundColor: "rgb(255, 2, 2)"
        });
        timeline["sven-" + index].to($(this), 3, {
            rotation: 720,
            opacity: 0,
            x: randomX + "px",
            y: randomInt(-yMax, -yMin) + "px",
            ease: easeOption
        });
        preloaderTL.add(timeline["sven-" + index], labelTime);
    });
}

function changeEase(customEase) {
    preloaderTL.pause(0);
    preloaderTL.clear();
    initPreloader(customEase);
    preloaderTL.restart();
}

changeEase(Linear.easeNone);

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = parseEase(this.value);
    changeEase(valueSelected);
});


// can be used for animating x, y, rotation and other simple operations
function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

// can be used for animating scale, opacity and other simple math operations
function randomFloat(min, max) {
    return (Math.random() * (max - min) + min).toFixed(1);
}

/****************************************************************
Parse ease string
****************************************************************/
function parseEase(string) {
    var easing = string.split(".");
    if (easing.length === 2) return window[easing[0]][easing[1]];
    var cfgExp = /true|false|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig;
    var config = string.match(cfgExp).map(JSON.parse);
    return window[easing[0]][easing[1]].config.apply(null, config);
}

TweenMax.delayedCall(5, showCredits, []);
TweenMax.delayedCall(1, showEaseOptions, []);

function showCredits() {
    $('.credits').show();
}

function showEaseOptions() {
  $('.easeOptions').show();
}

External CSS

  1. //fonts.googleapis.com/css?family=Dosis:600

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js