JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<button onclick="carregar()">
Clique Aqui
</button>

<div class="loading">
	<img src="http://i.giftrunk.com/44frgm.gif"/>
</div>

CSS

body{
	background-color:white;
	margin:none;
}

.loading{
	height: 250px;
	width: 250px;
	top: calc(50% - 250px);
	left: calc(50% - 250px);
	position:fixed;
	
	opacity:0;
	pointer-events:none;
	
	transition:opacity .5s;
}

.loading.show{
	opacity:1;
	pointer-events:all;
}

JavaScript

function carregar(){
	$(".loading").addClass("show");
	setTimeout(function(){
		$(".loading").removeClass("show");
		$("button").html("Digamos que Carregou");
	},5000);
}