title: With jQuery, how can I gray out and disable a webpage and then show some kind of spinner on top of that?
body: <p>I am still pretty "green" when it comes to web development and javascript/jQuery programming, so any help is appreciated. Here is what I want to do.</p>
  
  <ol>
  <li><p>I want to do the same thing that a jQuery UI dialog box does where it puts a semi-transparent image over the entire page and disables clicking of any of the controls underneath.</p></li>
  <li><p>I want to know how I might put some kind of spinner overlay on top to show that the website is working in the background. If I can use a animated GIF file that would be fine, but I'm not quite sure on the best approach to this.</p></li>
  </ol>
  
  <p>Here is an example of the grayed-out effect with a dialog box: 
  <a href="http://jqueryui.com/demos/dialog/#modal" rel="noreferrer">jQuery UI Example</a>. I want to know how to produce this effect without the dialog box on top. I do not have a good example of the spinner behavior.</p>
  
  <p>All suggestions, website referrals, and code is appreciated.</p>
  
  <p><b>EDIT:</b> I do not mean a "spinner control". I will try to find an example of what I am thinking of by spinner.</p>
  
  <p><b>EDIT:</b> What I mean by "spinner" is a loading gif of some kind like the "Indicator Big" gif on this website: <a href="http://ajaxload.info/" rel="noreferrer">http://ajaxload.info/</a></p>