fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
Check out the Demo
Me too :) fakeLoader.js is available as a Bower package. Just run
bower install fakeloader
Include in the top of your <body> tag
<div id="fakeLoader"></div>
Inside <head> tag
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2FyourPath%2FfakeLoader.css">
JQuery reference and the fakeLoader.js
<script src="proxy.php?url=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.0%2Fjquery.min.js">
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2FyourPath%2FfakeLoader.min.js">
Include in bottom of your <body> tag
<script type="text/javascript">
$("#fakeLoader").fakeLoader();
</script>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
zIndex:999, // Default zIndex
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'
bgColor:"#2ecc71", //Hex, RGB or RGBA colors
imagePath:"yourPath/customizedImage.gif" //If you want can you insert your custom image
});
</script>