Loadingoverlay in html with Javascript
<p>I am trying to place an overlay and loading spinner to block user interaction till loading complete in html file.</p>

<p>With reference of the tutorial <a href="http://www.jqueryrain.com/?eKV1bCMa" rel="nofollow">http://www.jqueryrain.com/?eKV1bCMa</a> 
 trying to place a Whole page Overlay and Single element Overlay.
But it is not working.
Seeking help to get it done
Thank you
Given below is the code.`</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="loadingoverlay.js"&gt;&lt;/script&gt;
&lt;script src="loadingoverlay.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;


&lt;script&gt;
$(document).ready(function(){
    $("#firstdata").click(function(){
        $("#div1").load("data2.html");
    });
  $("#driver").click(function(){
        $("#div1").load("demo_test.txt");
    });
});



 // Show full page Loading Overlay
 
$(document).ready(function(){
 $("#firstdata").click(function()
 {
 $.LoadingOverlay("show");

 // Hide it after 3 seconds
 setTimeout(function(){$.LoadingOverlay("hide");}, 3000);

}); 
});

// Show element Loading Overlay
 
$(document).ready(function(){
 $("#driver").click(function()
 {
 $("#element").LoadingOverlay("show");

 // Hide it after 3 seconds
 setTimeout(function(){$.LoadingOverlay("hide");}, 3000);

}); 
});
 
&lt;/script&gt;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;

&lt;div id="element"&gt;
 &lt;input type = "button" id = "firstdata" value = "External Content" /&gt;&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;input type = "button" id = "driver" value = "Load Data" /&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;/div&gt;
&lt;div id="div1"&gt;&lt;h2&gt;Let jQuery AJAX Change This Text&lt;/h2&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>`</p>