JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

CSS

.loader-overlay {
    position: fixed;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #eee;
}
.loader-overlay.left {
    left: 0;
}
.loader-overlay.right {
    right: 0;
}
.loader-logo {
    position: fixed;
    top: 10%;
    left: 50%;
    margin-left: -50px;
}
.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;
}

JavaScript

$(function () {
    var $leftOverlay = $("<div>")
        .addClass("loader-overlay left")
        .appendTo(document.body);
    var $rightOverlay = $("<div>")
        .addClass("loader-overlay right")
        .appendTo(document.body);
    var logoUrl = "http://placehold.it/100x100";
    var $logo = $("<img>")
        .hide()
        .addClass("loader-logo")
        .attr("src", logoUrl)
        .appendTo(document.body);

    fadeInLogo(function () {
        startBarAnimation(function () {
            waitFor(500, function () {
                bounceLogo(function () {
                    splitOutOverlay(function () {
                        console.log("all done!");
                    });
                });
            });
        });
    });

    function fadeInLogo(done) {
        $logo.fadeIn(2000);
        setTimeout(done, 2000);
    }

    function startBarAnimation(done) {
        var $top = $("<div>").addClass("loader-line top").height(5).appendTo(document.body);
        var $right = $("<div>").addClass("loader-line right").width(5).appendTo(document.body);
        var $bottom = $("<div>").addClass("loader-line bottom").height(5).appendTo(document.body);
        var $left = $("<div>").addClass("loader-line left").width(5).appendTo(document.body);
        var $progress = $("<div>").addClass("loader-progress").appendTo(document.body);

        tick(0, 5);

        function tick(prev, now) {
            if (now > 100) now = 100;

            var totalDuration = 200;
            var per = totalDuration / (now - prev);
            var durations = {
                top: per * (clamped(now) - clamped(prev)),
                right: per * (clamped(now - 25) - clamped(prev - 25)),
                bottom: per * (clamped(now - 50) - clamped(prev - 50)),
                left: per * (clamped(now - 75) - clamped(prev - 75))
            };

            setTimeout(function () {
                $progress.text(now + "%");
            }, 150);

            $top.animate({
  ...