JSFiddle - React, Tailwind, and code Playground

by kultura

HTML

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis...

CSS

@font-face {
    font-family: 'Pier Sans-Regular';
    src: url('fonts/pier-regular-webfont.woff2') format('woff2'),
         url('fonts/pier-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Adam CG';
    src: url('fonts/adam.cg_pro-webfont.woff2') format('woff2'),
         url('fonts/adam.cg_pro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


#preload {
font-family: 'Adam CG', sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
}


.loading_r {
    color: #87CE84;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: fixed;
    line-height: 0.8em;
    top: 50%;
    left: 0;
    right: 0;
    font-family: ;
    text-align: center;
    pointer-events: none;
    font-size: 4em;
    font-weight: bold;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-animation: loading_r 3s ease-in-out infinite;
    animation: loading_r 3s ease-in-out infinite;
    -webkit-transition: all 0.3s 0.5s ease;
    transition: all 0.3s 0.5s ease
}

.loading_r .period {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    display: inline-block;
    -webkit-animation: loading_r_period 3s ease-in-out infinite;
    animation: loading_r_period 3s ease-in-out infinite
}

@-webkit-keyframes loading_r {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    60% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    68% {
        -webkit-transform: scale(1) translate(-0.5em, 0);
        transform: scale(1) translate(-0.5em, 0)
    }
    85% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    100%...

JavaScript

//create a new event
var body = new Event('body');

//check if the body is available
var intID = setInterval(function(){
	if (document.body) {
		document.dispatchEvent(body);
		clearInterval(intID);
	}
},10);

//create HTML fragment and then insert fragment inside the DOM - 
//If there is a lot to insert into to the DOM, it is faster to create seperately. 
//Otherwise, every time we try to insert something, a parse has to pass first to;
//find the body, then go to the div, the image, paragraph etc...

//create HTML fragment
var newFragment = function(html) {
	var fragment = document.createDocumentFragment();
	var temp = document.createElement('div');

	temp.innerHTML = html;

	while(temp.firstChild)
		fragment.appendChild(temp.firstChild);

	return fragment;
};

var preloader = newFragment('<div id="preload"><span class="loading_r">R<span class="period">.</span></span></div>');

//insert preloader when body is ready
document.addEventListener('body', function(){
	document.body.insertBefore(preloader, document.body.childNodes[0]);
});

//function to remove preloader markup
var removePreloader = function () {
	var preloader = document.getElementById("preload");
	preloader.style.opacity = 1;

	var animationID = setInterval(function(){
		preloader.style.opacity -= 0.1;
		if (preloader.style.opacity <= 0.2) {
			preloader.parentNode.removeChild(preloader);
			clearInterval(animationID);
		}
	}, 70);
};

//when page is fully loaded remove preloader
window.addEventListener('load', removePreloader);