Hi I want to stop the Jqry Load Img Prgrss Barwhn I clckdBtn

Question

Hi,
I want to stop the Load Image ProgressBar  of Jquery  by clicking the button present on the Load Image ProgressBar and display the data how much have been loaded in the span of the before the button click into the repeater controle till that time.


---------------My Front End Code-----------------------


 function ShowProgress() {
  setTimeout(function () {
  var modal = $('<div />');
  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);
  }
  function LoadDefaultPage() {
  HideRepeater();
  ShowProgress();
  }
  function HideRepeater() {
  $('#<%= PnlRptr.ClientID %>').hide();
  $('#<%= PnlRslt.ClientID %>').hide();
  $('#<%= Resultset.ClientID %>').hide();
  $('#<%= lblOutput.ClientID %>').hide();
   
  }

  </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <table width="100%" style="background-color: #e8f0d8">
  <tr colspan="2">
  <td width="50px" colspan="2">
  </td>
  </tr>
  <tr>
  <td  class="txt">
  Search:
  </td>
  <td>
  <asp:TextBox ID="txtSrch" runat="server" CssClass="TxtBox"></asp:TextBox>
  </td>
  <td class="txt">
  Department:
  </td>
  <td>
  <asp:DropDownList ID="txtDrpt" runat="server" CssClass="Ddl">
  </asp:DropDownList>
  </td>
  <td width="240px" style="color: Black; text-align: left">
  <asp:Label ID="lblval" runat="server"></asp:Label>
  <br />
  <asp:Label ID="lblsrch1" runat="server"></asp:Label>
  <br />
  <asp:Label ID="lblsrch2" runat="server"></asp:Label>
  <br />
  <asp:Label ID="lblsrch3" runat="server"></asp:Label>
  <asp:Label ID="lblsrch4" runat="server"></asp:Label>
  <br />
  <asp:Label ID="lblsrch5" runat="server"></asp:Label>
  </td>
  </tr>
  <tr>
  <td class="txt">
  SearchBy:
  </td>
  <td>
  <asp:DropDownList ID="ddlsrchby" runat="server" onchange="changelabel(this)" CssClass="Ddl">
  <asp:ListItem Value="1">Full Name</asp:ListItem>
  <asp:ListItem Value="4">Phone Number</asp:ListItem>
  <asp:ListItem Value="2">First Name</asp:ListItem>
  <asp:ListItem Value="3">Last Name</asp:ListItem>
  </asp:DropDownList>
  </td>
  <td class="txt">
  Location:
  </td>
  <td class="txt">
  <asp:DropDownList ID="ddllctn" runat="server" CssClass="Ddl">
  </asp:DropDownList>
  </td>
  </tr>
  <tr>
  <td>
  </td>
  <td>
  <asp:Button ID="btnSrch" runat="server" Text="Search" OnClick="btnSrch_Click" OnClientClick="LoadDefaultPage();"
  CssClass="mybtn"></asp:Button>
  </td>
  </tr>
  </table>
  <div class="loading" align="center" id="ProgressBar">
 
  <img src="Images/cancelbutton.jpg" class="loadimagebutton" onclick="DisplayDefaultPage()" alt="Cancel"/>
  <%--<input type="button"  class="loadimagebutton" onclick="DisplayDefaultPage()" />--%>
 
  Loading. Please wait.<br />
  <br />
  <img src="Images/8.gif" />
  </div>
  <table width="100%">
  <tr>
  <td style="width: 10px; color: Black;">
  <nobr>  <asp:Label ID="lblOutput" runat="server" Text=""></asp:Label></nobr>
  <nobr>  <asp:Label ID="Resultset" runat="server" Text="Record Result"></asp:Label></nobr>
  </td>
  <td align="right" class="txt" style="width: 100%">
  <asp:Panel ID="PnlRslt" runat="server" CssClass="Reslut">
  <asp:Label ID="LblReslt" runat="server" Text="" CssClass="alignment">&nbsp;</asp:Label><asp:ImageButton
  ID="ExcelExprt" runat="server" ImageUrl="~/Images/Excel.jpg" Height="25px" OnClick="ExcelExprt_Click" />
  </asp:Panel>
  </td>
  </tr>
  <tr>
  <td colspan="100%" style="visibility: visible">
  <asp:Panel ID="PnlRptr" runat="server">
  <asp:Repeater runat="server" Visible="true" ID="rptrSrch">
  <HeaderTemplate>
  <table class="search_table" width="100%">
  <tr>
  <th>
  Full Name
  </th>
  <th>
  Associate<br />
  Details
  </th>
  <th>
  E-mail
  </th>
  <th>
  Work<br />
  Group
  </th>
  <th>
  Org<br />
  Chart
  </th>
  <th>
  Department
  </th>
  <th>
  Job Title
  </th>
  <th>
  Phone Number
  </th>
  <th>
  Extension
  </th>
  <th>
  Location
  </th>
  <th>
  Mail
  <br />
  Code
  </th>
  </tr>
  <tbody>
  </HeaderTemplate>
  <ItemTemplate>
  <tr>
  <tr style="visibility: inherit">
  <td>
  <%#Eval("Name")%>
  </td>
  <td align='center'>
  <img src="Images/FindBinoculars-icon.gif" class='images' id='<%# Eval("Id")%>' onclick="Associatedetails(this.id)" />
  </td>
  <td align='center'>
  <a href="mailto: <%# Eval("EmailId")%> ">
  <img src="Images/email.jpg" class='images' />
  </td>
  <td align='center'>
  <img src="Images/index.jpg" class='images' id='<%# Eval("Id")%>' onclick="WorkGroup(this.id)" />
  <br />
  </td>
  <td align='center'>
  <img src="Images/OrgChart.jpg" class='images' onclick="OrganizationChart(this.id)"
  id='<%# Eval("Id")%>' />
  </td>
  <td>
  <%# DataBinder.Eval(Container.DataItem,"Department")%>
  </td>
  <td>
  <%# Eval("Title")%>
  </td>
  <td>
  <%# Eval("Phoneno")%>
  </td>
  <td>
  <%# Eval("Extension")%>
  </td>
  <td>
  <%# Eval("Location")%>
  </td>
  <td>
  <%# Eval("Mailcode")%>
  </td>
  </tr>
  </tr>
  </ItemTemplate>
  <FooterTemplate>
  <tr>
    </tbody> </table>
  </FooterTemplate>
  </asp:Repeater>
  </asp:Panel>
  </td>
  </tr>
  </table>
</asp:Content>




--------------------------My Cs Code----------------








  protected void btnSrch_Click(object sender, EventArgs e)
  {
  System.Threading.Thread.Sleep(4000);

  Search();
  }


public void Search()
  {

  Resultset.Visible = true;
  PnlRslt.Visible = true;
  try
  {
  WorkerGroup Result = new WorkerGroup();
  BFSearchFunction SearchFnctn = new BFSearchFunction();
  var SearchText = txtSrch.Text.Trim();
  if (SearchText.Contains(","))
  {
  lblOutput.Text = "SearchText Format Can Be Only In 'FirstName LastName' Not In 'LastName,FirstName'";
  lblOutput.Attributes.Add("style", "color:Red;font-size:15px;");
  LblReslt.Text = "Search Records Count: 0";
  ExcelExprt.Enabled = false;
  rptrSrch.DataSource = null;
  rptrSrch.DataBind();
  }
  else
  {
  string FirstString = string.Empty;
  string SecondString = string.Empty;
  var Index = SearchText.LastIndexOf(',');
  if (Index != -1)
  {
  FirstString = SearchText.Substring(0, Index).Trim();
  SecondString = SearchText.Substring(Index + 1).Trim();
  SearchText = FirstString + " " + SecondString;
  }

  Result.Name = SearchText;
  Result.Department = txtDrpt.SelectedItem.Text;
  Result.Phoneno = ddlsrchby.SelectedItem.Text;
  Result.Location = ddllctn.SelectedItem.Text;
  List<WorkerGroup> Output = SearchFnctn.SearchResults(Result);
  if (Output.Count == 0)
  {
  LblReslt.Text = "Search Records Count:" + Output.Count.ToString();
  lblOutput.Text = "No Result found for your entries";
  lblOutput.Attributes.Add("style", "color:Red;font-size:15px;");
  rptrSrch.Visible = false;
  ExcelExprt.Enabled = false;
  ViewState["Result"] = Output;
  }
  else
  {
  lblOutput.Text = "";
  LblReslt.Text = "Search Records Count:" + Output.Count.ToString();
  rptrSrch.DataSource = Output;
  rptrSrch.DataBind();
  rptrSrch.Visible = true;
  ExcelExprt.Enabled = true;
  ViewState["Result"] = Output;
  }
  }
  }
  catch (Exception)
  {

  throw;
  }


  }