title: Showing Loading Animation While Page Is Loading
body: <p>I am trying to place a Loading Animation onto my page but have never done that before and have no idea where to start. I have a MasterPage where I have a Top/Side/Body contents. I would like to have a wait animation to appear when someone clicks on a Page Tab(Navigation) or side panel shortcuts. I don't know if the animation needs to be placed inside a Master Page or does it have to be placed inside each individual page? Also, How do you make it load right away before everything else and hide when the page is fully loaded? Please help as I am not much familiar with page loading animation. This is what I tried but it does not work, I have placed this code inside a page not a master page: </p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/DefaultView.Master"     AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="monitor.Dashboard.Default" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="cntSidebar" runat="server"&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="cntBody" runat="server"&gt;
      &lt;script src="../jquery-1.7.js" type="text/javascript"&gt;
          $(document).ready(function () {
              $('#loadingImage').hide();            
          });
      &lt;/script&gt;
      &lt;asp:Image ID="loadingImage" runat="server"  ImageUrl="~/App_Themes/Sugar2006/images/loading.gif" /&gt;
      &lt;div id="loading"&gt;Page Has Loaded :)&lt;/div&gt;
  
  &lt;/asp:Content&gt;
  </code></pre>