jcadima
4/12/2017 - 3:10 PM

Page Loader GIF - Background Image

Page Loader GIF - Background Image

new_gist_file.html
content_copyfile_download


<!DOCTYPE html>
<html>
<head>
    <title></title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<style type="text/css">

	body.loading {
	    overflow: hidden;   
	}

	body.loading .page_loader {
	    display: block;
	}
	
	.page_loader {
	    display:    none;
	    position:   fixed;
	    z-index:    1000;
	    top:        0;
	    left:       0;
	    height:     100%;
	    width:      100%;
	    background: rgba(0, 0, 0, 0.71)
	                url('https://prestigepay.com/wp-content/themes/pop/images/spinner.gif') 
	                50% 50% 
	                no-repeat;
	}

}

</style>



</head>
<body>



<div class="container">

	<div id="wrapper">
		<h1>Spinner GIF demo</h1>
		<form action="#" method="post" onsubmit="return validateForm();">
			<input type="text" id="fname" name="fname" value="Dummy Input" /><br>
			<input type="submit" name="submit" value="Submit" />
		</form>
	
	</div>


</div>


<div class="page_loader"></div>


<script>

function validateForm() {

    var fname  = $('#fname').val();

    if (fname == null || fname == "") {
        alert("We need your first name to verify your identity.");
        return false;
    }

    else {

		$body = $("body");
        $body.addClass("loading");  

		return true;
	}

}
	
</script>


</body>
</html>