JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropboxusercontent.com/s/aozlgvng61ostd2/jquery.js" type="text/javascript"></script>
	<script src="http://dl.dropboxusercontent.com/s/lixh4mau74djktr/modernizr.js" type="text/javascript"></script>

	<div class="demo-wrapper html5-progress-bar">
	<p id='motion'> </p>
		<div class="progress-bar-wrapper">
			<progress id="progressbar" value="0" max="100"></progress>
			<span class="progress-value">0%</span>
			 <p id='motion1'> </p>
		</div>
	</div>
	<div id='details' style="display: none">
	<h1>Page Load Successfull, Notice it pauses when in another tab.</h1>
	</div>

CSS

body {
	background-color: #f9f9f9;
	background-image:...

JavaScript

$(document).ready(function() {
			if(!Modernizr.meter){
				alert('Sorry your brower does not support HTML5 progress bar');
			} else {
				var progressbar = $('#progressbar'),
					max = progressbar.attr('max'),
					time = (800/max)*10,	
			        value = progressbar.val();

			    var loading = function() {
			        value += 1;
			        addValue = progressbar.val(value);
			        
			        $('.progress-value').html(value + '%');

			        if (value == max) {
			            clearInterval(animate);		$(".demo-wrapper").remove();   $("#details").fadeIn("slow");     $("#motion1").html("Report for Registration.");    	$("#motion").remove();   
			        }
						if (value == 1) {
			                $("#motion").html("Loading Page..");   
			        }
						  if (value == 86) {
			                $("#motion").html("Connecting..");   
			        }
			    };

			    var animate = setInterval(function() {
			        loading();
			    }, time);
			};
	
		
		});