Hide the page body until page & dependencies have finished loading

html.loading.snippet.html

<script>
	// add a class of 'loading' to the HTML, then remove it once the page has finished loading
	(function(c){
		c('scripted loading')
		window.onload = function(){setTimeout(function(){
			c(c().replace('loading',''))
		},30)}
	}(function(c){
		var h = document.lastChild
		return c ? h.className = c : h.className
	}))
</script>
<style>
	html.loading body {
		opacity: 0;
		   -moz-transition: opacity 0.3s ease-out;
		     -o-transition: opacity 0.3s ease-out;
		-webkit-transition: opacity 0.3s ease-out;
		    -ms-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
	}
	
	html.loading:after {
		content: 'Loading...';
		display: block;
		line-height: 1em;
		margin-top: -.5em;
		position: absolute;
		text-align: center;
		top: 50%;
		width: 100%;
	}
</style>

replace the "Loading..." text with loading image.

It works for me. But, can some one help me to not hide the body, but prevent click to it?