JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<button class="js-btn-ok">Ok.</button>

CSS

.global-loader-wrapper {
	display: table;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.35);
}
	.global-loader-inner {
		display: table-cell;

		text-align: center;
		vertical-align: middle;
	}
		.global-loader {
			display: inline-block;
			padding: 20px;

			text-align: center;

			background: #fff;
			border: 1px solid #333;
			border-radius: 3px
		}
			.global-loader-icon {
				display: block;
				margin: auto;
				width: 16px;
				height: 16px;
    
                background: url('https://cdn0.iconfinder.com/data/icons/duesseldorf/16/process.png');
			}

			.global-loader-msg {
				font-size: 12px;

				margin: 10px 0 0;

				text-align: center;
			}

JavaScript

/*<![CDATA[*/
jQuery(document).ready(function ($) {
    $(".js-btn-ok").on('click', function(){
        $.mavensGlobalLoader()
    });
});










/*
// How To Use
//

// Run (and show) GLoader (Global Loader):
$.mavensGlobalLoader()

// Methods support:
$.mavensGlobalLoader() -- create and/or toggle() loader
$.mavensGlobalLoader("show") and $.mavensGlobalLoader("hide") -- toggle() loader
$.mavensGlobalLoader("remove") -- remove loader from page

// Options:
$.mavensGlobalLoader("",
    { loaderMsgText: "Loading..." } // set loader Message
)

By default loader target is 'body', but you can change it
$.mavensGlobalLoader("",
    { target: "#block" } // #block -- same as div#block
)
*/
!function ( $ ) {

    $.extend({
        mavensGlobalLoader: function(method, options){

            this.options = $.extend({

                wrapperClassName:   "global-loader-wrapper"
                ,wrapperID:         "global-loader-wrapper"

                ,innerClassName:    "global-loader-inner"
                ,loaderClassName:   "global-loader"
                ,loaderIconName:    "global-loader-icon"
                ,loaderMsgName:     "global-loader-msg"

                ,loaderMsgText:     "Loading, please wait..."

                ,target:            "body"

            }, $.mavensGlobalLoader.defaults, options);

            var that = this;
            var $target = $(this.options.target);

            // Create Loader
            function createLoader(){

                // creating loader
                // wrapper
                var $wrapper = $("<div/>", {
                    id:    that.options.wrapperID
                }).addClass( that.options.wrapperClassName );

                // inner
                var $inner  = $("<div/>").addClass( that.options.innerClassName );

                // loader area
                var $loader = $("<div/>").addClass( that.options.loaderClassName );

                // icon and message
                var $icon   =...