JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

CSS

html {
				-webkit-transition: background-color 1s;
				transition: background-color 1s;
			}
			html, body { min-height: 100%; }
			html.loading {
				background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
				-webkit-transition: background-color 0;
				transition: background-color 0;
			}
			body {
				-webkit-transition: opacity 1s ease-in;
				transition: opacity 1s ease-in;
			}
			html.loading body {
				opacity: 0;
				-webkit-transition: opacity 0;
				transition: opacity 0;
			}
			button {
				background: #00A3FF;
				color: white;
				padding: 0.2em 0.5em;
				font-size: 1.5em;
			}

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();