JSFiddle - React, Tailwind, and code Playground

by Josué López

HTML

<!--<div id="preloader">
   <img id="spinner" src="http://cssload.net/preloaders/circular.gif" alt="" />
</div>

<p>hello</p>-->

<div id="content">
    <h1>Preloading site</h1>
    <ul>
        <li><img src="https://c4.staticflickr.com/8/7514/15925993125_44d6d03d5a_n.jpg" alt="Flower" /></li>
        <li><img src="https://c4.staticflickr.com/8/7473/15924550291_7272860bdb_n.jpg" alt="Green" /></li>
        <li><img src="https://c4.staticflickr.com/8/7514/15925993125_44d6d03d5a_n.jpg" alt="Mushroom" /></li>
        <li><img src="https://c4.staticflickr.com/8/7473/15924550291_7272860bdb_n.jpg" alt="Lizard" /></li>
        <li class="gradient"></li>
        <li><img src="https://c4.staticflickr.com/8/7514/15925993125_44d6d03d5a_n.jpg" alt="Flowers" /></li>
        <li><img src="https://c4.staticflickr.com/8/7473/15924550291_7272860bdb_n.jpg" alt="Sea" /></li>
        <li><img src="https://c4.staticflickr.com/8/7514/15925993125_44d6d03d5a_n.jpg" alt="Flowers" /></li>
    </ul>
    
</div>

CSS

/*#preloader,#spinner {  
     position:fixed;  
     top:0; left:0; right:0; bottom:0; margin:auto; 
     background:#fff;  
     z-index:9999;  
     overflow:hidden;
}  */

#loaderMask{
    text-align: center;
    padding-top: 20%;
}
#loaderMask span{
    font-size: 5em;
    
}

body {
    background-color: #000;
    margin: 0px;
    padding: 0px;
    background-image: url(https://c2.staticflickr.com/8/7475/15921114622_3b99c8b950_n.jpg);
    background-position: 50% 50%;
    background-attachment: fixed;
    font-family: sans-serif;
    font-size: 14px;
}

p {
    line-height: 1.4em;
}

img {
    max-width: 100%;
}

body #content {
    width: 800px;
    padding: 20px;
    background-color: rgba(255,255,255,.6);
    margin: 20px auto;
    overflow: hidden;
}

h1 {
    font-family: georgia;
    font-style: italic;
    color: maroon;
}

body ul {
    padding: 0px;
    margin: 0px;
}

body ul li {
    display: block;
    list-style-type: none;
    float: left;
    width: 400px;
    height: auto;
    overflow: hidden;
    text-align: center;
}

body ul li.gradient {
    padding: 20px;
    width: 360px;
    height: 227px;
    background: #efc5ca;
 /* Old browsers */
    background: -moz-linear-gradient(top, #efc5ca 0%, #ef2f43 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efc5ca), color-stop(100%,#ef2f43));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #efc5ca 0%,#ef2f43 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #efc5ca 0%,#ef2f43 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #efc5ca 0%,#ef2f43 100%);
 /* IE10+ */
    background: linear-gradient(top, #efc5ca 0%,#ef2f43 100%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#ef2f43',GradientType=0 );
 /* IE6-9 */
}

JavaScript

/*$(window).load(function() {
   $('#preloader').fadeOut(3000, function() {
      $(this).remove();
   });
}); */

$(document).ready(function() {
    "use strict"
    //indexOf is not supported by IE9>. 
    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function(elt /*, from*/ ) {
            var len = this.length >>> 0;

            var from = Number(arguments[1]) || 0;
            from = (from < 0) ? Math.ceil(from) : Math.floor(from);
            if (from < 0) from += len;

            for (; from < len; from++) {
                if (from in this && this[from] === elt) return from;
            }
            return -1;
        };
    }

    var bgImg = [],
        img = [],
        count = 0,
        percentage = 0;

    //Creating loader overlay
    $('<div id="loaderMask"><span>0%</span></div>').css({
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        background: '#fff'
    }).appendTo('body');

    //Searching all elemnts in the page for image
    $('*').filter(function() {

        var val = $(this).css('background-image').replace(/url\(/g, '').replace(/\)/, '').replace(/"/g, '');
        var imgVal = $(this).not('script').attr('src');

        if (val !== 'none' && !/linear-gradient/g.test(val) && bgImg.indexOf(val) === -1) {
            bgImg.push(val)
        }

        if (imgVal !== undefined && img.indexOf(imgVal) === -1) {
            img.push(imgVal)
        }

    });

    var imgArray = bgImg.concat(img);

    $.each(imgArray, function(i, val) { //Adding load and error event
        $("<img />").attr("src", val).bind("load", function() {
            completeImageLoading();
        });

        $("<img />").attr("src", val).bind("error", function() {
            imgError(this);
        });
    })

    function completeImageLoading() {
        count++;
        percentage = Math.floor(count / imgArray.length * 100);
        $('#loaderMask').html('<span>' + percentage + '%' +...