title: ASP.NET C# Show loading image while page is load
body: <p>is there any suggestion for doing a loading image when selecting a <strong>RadioButtonList</strong> &amp; <strong>DropDwonList</strong> ?? Or maybe put some message like <strong><em>"Please Wait.. The Page is Loading"</em></strong> while the page is loading. Loading image for AutoPostBack. I have a Masterpage.</p>
  
  <p>This is webform</p>
  
  <pre><code>&lt;td class="auto-style177"&gt;
  &lt;asp:Panel ID="Panel101" runat="server" Visible="False"&gt;
  &lt;asp:RadioButtonList ID="rbPembeli2" runat="server" CellPadding="0" CellSpacing="0"
  Font-Size="X-Small" Height="20px" RepeatDirection="Horizontal" Width="277px"
  AutoPostBack="True" OnSelectedIndexChanged="rbPembeli2_SelectedIndexChanged"&gt;
  &lt;asp:ListItem Value="9"&gt;HQ ANA EDAR&lt;/asp:ListItem&gt;
  &lt;asp:ListItem Text="PDA/PPN" Value="0"&gt;&lt;/asp:ListItem&gt;
  &lt;asp:ListItem Text="PPP/PPW" Value="5"&gt;&lt;/asp:ListItem&gt;
  &lt;/asp:RadioButtonList&gt;&lt;/asp:Panel&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>This is Js</p>
  
  <pre><code>    function ShowProgress() {
          setTimeout(function () {
              var modal = $('&lt;div /&gt;');
              modal.addClass("modal");
              $('body').append(modal);
              var loading = $(".loading");
              loading.show();
              var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
              var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
              loading.css({ top: top, left: left });
          }, 200);
      }
      $('form').live("submit", function () {
          ShowProgress();
      });
  </code></pre>