UI Blocking Splash Screen Demo - JSFiddle

http://www.sitepoint.com/forums/showthread.php?1230444-How-do-you-make-a-JavaScript-splash-page

by anand potta

HTML

<div id="splashOverlay">
  <div id="splashOverlay-content">
    <div class="splashScreenlogo"></div>
    <div id="splashScreenloading"></div>
  </div>
</div>

CSS

#splashOverlay{
    	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.8;
	z-index:1001;
}

#splashOverlay-content{ 
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	padding: 16px;
	z-index:1002;
  text-align:center;
  margin:30% auto;
  color:#ffffff;
}

.splashScreenlogo{
  background-image:url("http://mmsg-company-prd.azurewebsites.net/wp-content/uploads/2017/07/Maxxia.png");
background-repeat:no-repeat;
background-size:100%;
width:200px;
height:200px;
text-align:center;
margin: 0px auto;
}

/* Animation */
@-webkit-keyframes loading {
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes loading {
	to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes loading {
	to { -ms-transform: rotate(360deg); }
}
@keyframes loading {
	to { transform: rotate(360deg); }
}

/* Loader (*/
#splashScreenloading {

	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	border-bottom: 4px solid #777;
	border-left: 4px solid #777;
	
	-webkit-animation: loading 1.2s infinite linear;
	-moz-animation: loading 1.2s infinite linear;
	-ms-animation: loading 1.2s infinite linear;
	animation: loading 1.2s infinite linear;
	margin: 0px auto;
}

JavaScript

$.fn.center = function () {
  this.css("position","absolute");
  this.css("top", Math.max(0, (
    ($(window).height() - $(this).outerHeight()) / 2) + 
     $(window).scrollTop()) + "px"
  );
  this.css("left", Math.max(0, (
    ($(window).width() - $(this).outerWidth()) / 2) + 
     $(window).scrollLeft()) + "px"
  );
  return this;
}

$("#splashOverlay").show();
$("#splashOverlay-content").show().center();

setTimeout(function(){    
  $("#splashOverlay").fadeOut();
}, 5000);