JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/master/animate.css">
<div class="loader-overlay"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat eos aspernatur omnis deleniti voluptas odio dignissimos et voluptates dolore maxime magnam inventore beatae aperiam possimus nobis illo laudantium veniam doloribus?</p>

CSS

body {
    font-family: Lucida Grande;
}
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #eee;
}
.loader-line {
    background: steelblue;
    position: fixed;
}
.loader-line.top {
    top: 0;
    left: 0;
}
.loader-line.right {
    top: 0;
    right: 0;
}
.loader-line.bottom {
    bottom: 0;
    right: 0;
}
.loader-line.left {
    bottom: 0;
    left: 0;
}
.loader-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    font-family: Lucida Grande;
}
.loader-logo {
    position: fixed;
    top: 10%;
    left: 45%;
}
.loader-split {
    position: fixed;
    height: 100%;
    background: #eee;
    top: 0;
}
.loader-split.left {
    left: 0;
}
.loader-split.right {
    right: 0;
}

JavaScript

start({
    width: 5,
    incrementEvery: 500,
    incrementBy: 20,
    removeAfter: 2000,
    fadeOutDuration: 1000,
    logoUrl: "http://placehold.it/100x100",
    logoFadeInDuration: 2000,
    splitDuration: 1000
});

function start(o) {
    var $overlay = $("<div>").addClass("loader-overlay");
    var $logo = $("<img>").addClass("loader-logo").attr("src", o.logoUrl).hide();

    var $top = $("<div>").addClass("loader-line top").height(o.width);
    var $right = $("<div>").addClass("loader-line right").width(o.width);
    var $bottom = $("<div>").addClass("loader-line bottom").height(o.width);
    var $left = $("<div>").addClass("loader-line left").width(o.width);
    var $progress = $("<div>").addClass("loader-progress");
    var $splitLeft = $("<div>").addClass("loader-split left");
    var $splitRight = $("<div>").addClass("loader-split right");

    $(document.body).append($overlay).append($logo).append($top).append($right).append($bottom).append($left).append($progress).append($splitLeft).append($splitRight);

    $logo.fadeIn(o.logoFadeInDuration);
    setTimeout(function () {
        tick(0);
    }, o.logoFadeInDuration);

    function tick(done) {
        $progress.text(~~done + "%");

        $top.delay(o.incrementEvery * 0).animate({
            width: Math.min(done, 25) * 4 + "%"
        }, o.incrementEvery * 0.1);
        $right.delay(o.incrementEvery * 0.1).animate({
            height: Math.min(done - 25, 25) * 4 + "%"
        }, o.incrementEvery * 0.1);
        $bottom.delay(o.incrementEvery * 0.2).animate({
            width: Math.min(done - 50, 25) * 4 + "%"
        }, o.incrementEvery * 0.1);
        $left.delay(o.incrementEvery * 0.3).animate({
            height: Math.min(done - 75, 25) * 4 + "%"
        }, o.incrementEvery * 0.1);

        if (done >= 100) {
            $logo.addClass("animated bounce");
            setTimeout(function () {
               ...