JSFiddle - React, Tailwind, and code Playground

by Leftium

HTML

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

CSS

.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;
}



html, body, iframe {
  width:100%;
  height:100%;
  margin: 0px;
  padding: 0px;
  border: 0px
}

iframe {
    position: absolute;
    height: 100%
}

JavaScript

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

    // Attach behavior to Login button.
    $('.login').on('click', function () {
        $app.addClass('loading');
        
        // Create an <iframe>.
        $iframe = $('<iframe>');
        
        // Set url of <iframe> to desired redirect URL.
        // Note: the URL must be in the same domain, or set special HTTP headers to allow rendering inside an <iframe>.
        $iframe.attr({src: 'http://doc.jsfiddle.net/'});
        
        // Add <iframe> we just created to DOM.
        $iframe.appendTo($('body'));
        
        // When <iframe> has been loaded, remove <div> containing login button and
        // loading spinner to reveal <iframe>.
        $iframe.load(function() {
            $('.app').remove()
        });
    });
});