JSFiddle - React, Tailwind, and code Playground

by GRMule

HTML

<div id="myDiv">
    Hello world!
</div>
<button id="start">start</button>
<button id="stop">stop</button>

CSS

#myDiv {
    height:200px;;
    width:400px;
    background-color: green;
    color: white;
    font-size: 40px;
}

JavaScript

$(document).ready(function () {
    $('#start').click(function () {
        $('#myDiv').pleaseWait();
    });
    $('#stop').click(function () {
        $('#myDiv').pleaseWait('stop');
    });
});



;(function($) {
	var methods = {
		init: function(settings) {

			return this.each(function() {
				var self = this;
				if (typeof self.pleaseWait != 'undefined')
					return;				
				self.pleaseWait = {
					opt:  $.extend(true, {}, $.fn.pleaseWait.defaults, settings),
					cog: new Image(),
					timer: false,
					canvas: document.createElement('canvas'),
					overlay: document.createElement('div')
				};

				var targetWidth = $(self).outerWidth();
				var targetHeight = $(self).outerHeight();
				var verticalMidpoint = (targetHeight / 2) - (self.pleaseWait.opt.height / 2);
				var horizontalMidpoint = (targetWidth / 2) - (self.pleaseWait.opt.width / 2);
				var offset = $(self).offset();

				self.pleaseWait.canvas.setAttribute('width', self.pleaseWait.opt.width);
				self.pleaseWait.canvas.setAttribute('height', self.pleaseWait.opt.height);
				$(self.pleaseWait.canvas).css({
					'position':'absolute',
					'z-index':'999999',
					'left':offset.left + horizontalMidpoint,
					'top':offset.top + verticalMidpoint
				});
				$(document.body).append(self.pleaseWait.canvas);

				self.pleaseWait.overlay = document.createElement('div');
				$(self.pleaseWait.overlay).css({
					'position':'absolute',
					'z-index':'999998',
					'left':offset.left,
					'top':offset.top,
					'width':targetWidth,
					'height':targetHeight,
					'background-color':'rgba(255,255,255,0.8)',
					'display':'none'
				});
				$(document.body).append(self.pleaseWait.overlay);

				if (self.pleaseWait.opt.image_type == 'encoded')
			    	self.pleaseWait.cog.src = 'data:image/png;base64,'+self.pleaseWait.opt.image;
			    else
			    	self.pleaseWait.cog.src = image;

				$(self).attr('data-pleaseWait', '1');

				methods.start.call(self);

      		});
    	},
		start: function ()...