JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div class="loading"></div>

CSS

html {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body { min-height: 100%; }
body {
    background: #333;
    -webkit-transition: background-color 0;
    transition: background-color 0;
}

/*
===================================================================== 
DEMO 4
=====================================================================
*/

.loading {
	background: rgba(0, 50, 250, 0);
	position: relative;
	margin: 5em auto 0 auto;
	width: 3em; height: 3em;
	-webkit-animation-name: rotate;
	   -moz-animation-name: rotate;
	    -ms-animation-name: rotate;
	        animation-name: rotate;
}

.loading,
.loading:before,
.loading:after {
	border-radius: 100%;
	-webkit-animation-duration: 3s;
	   -moz-animation-duration: 3s;
	    -ms-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	   -moz-animation-iteration-count: infinite;
	    -ms-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in;
	   -moz-animation-timing-function: ease-in;
	    -ms-animation-timing-function: ease-in;
	        animation-timing-function: ease-in;
}

.loading:before,
.loading:after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: inherit; height: inherit;
}

.loading:before {
	background: rgba(200, 250, 100, 0);
	-webkit-animation-name: ring;
	   -moz-animation-name: ring;
	    -ms-animation-name: ring;
	        animation-name: ring;
}

.loading:after {
	background: rgba(250, 0, 200, 0);
	-webkit-animation-name: ring2;
	   -moz-animation-name: ring2;
	    -ms-animation-name: ring2;
	        animation-name: ring2;
}

@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
		box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
	}
	85%, 100% { ...

JavaScript

var html = document.getElementsByTagName('html')[0];
            //html.className = "loading";
			var removeLoading = function() {
				// In a production application you would remove the loading class when your
				// application is initialized and ready to go.  Here we just artificially wait
				// 3 seconds before removing the class.
				setTimeout(function() {
					//html.className = html.className.replace(/loading/, '');
				}, 3000);
			};
			removeLoading();