How can I hide the progress bar until the zip file loads in asp.net Gridview c#

Question

I am using the progress bar to provide feedback to the user until the zip file is loaded in the Gridview, but it is not working properly. We have also defined a Thread, but it does not count the exact size of the zip file.

<script type="text/javascript">
  $(function () {
    $('[id*=Button1]').bind('click', function () {
      var progress = setInterval(function () {
        var $bar = $('.bar');
        if ($bar.width() >= 400) {
          clearInterval(progress);
          $('.progress').removeClass('active');
        } else {
          $bar.width($bar.width() + 40);
        }
        $bar.text($bar.width() / 4 + "%");
      }, 540);
    });
  });
</script>

<asp:UpdatePanel ID="pnl1" runat="server">
  <ContentTemplate>
    <div class="col-md-12">
      <div class="col-md-2">
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" CssClass="btn btn-success" BackColor="#1aae88" Text="Process Incoming" />
      </div>
      <div class="col-md-2">
        <asp:Button ID="Button2" runat="server" Text="Process Outgoing" CssClass="btn btn-success" BackColor="#1aae88" OnClick="Button2_Click" />
      </div>
      <div class="col-md-5">
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="pnl1">
          <ProgressTemplate>
            <div style="margin-top: 0px; margin-left: 25px; width: 400px;">
              <div class="progress progress-striped active">
                <div class="bar" style="width: 0%;">
                </div>
              </div>
            </div>
        </ProgressTemplate>
      </asp:UpdateProgress>
    </div>
    <br></br>
    <br />
  </div>

c#:

Thread.Sleep(20000);