JSFiddle - React, Tailwind, and code Playground

by Umidbek Karimov

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="app loading">
    <div class="loader"><i class="fa fa-spinner fa-spin fa-lg"></i>

    </div>
    <div class="page page-1 active">
        <button class="login">Login</button>
    </div>
    <div class="page page-2">
        <p>Some awesome stuff here</p> <a href="#" class="logout">Logout</a>

    </div>
</div>

CSS

.app {
}
.loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 1000;
    background-color: #fff;
}
.loader > .fa {
    position: absolute;
    left: 50%;
    top: 50%;
}
.app.loading > .loader {
    display: block;
}
.page {
    display: none;
}
.page.active {
    display: block;
}

JavaScript

jQuery(document).ready(function ($) {
    $app = $('.app'),
    $pages = $('.page');

    $('.login').on('click', function () {
        $app.addClass('loading');

        $pages.removeClass('active').filter('.page-2').addClass('active');

        setTimeout(function () {
            $app.removeClass('loading');
        }, 500);
    });

    $('.logout').on('click', function () {
        $app.addClass('loading');

        $pages.removeClass('active').filter('.page-1').addClass('active');

        setTimeout(function () {
            $app.removeClass('loading');
        }, 500);
    });

    $app.removeClass('loading');
});