UpdatePanel with PostbackTrigger froze even after file download is complete

I was trying to have a image loader during the excel file download. This is my current code.

In Javascript

function ShowProgress() {
    document.getElementById('<% Response.Write(prgLoadingStatus.ClientID); %>').style.display = "inline";
}

In aspx page

<asp:UpdatePanel ID="upAlignBuyer" runat="server" UpdateMode="Conditional" EnableViewState="true" >
<ContentTemplate>
    <asp:Button ID="Button2" Text="Download BWS" CssClass="app_button" 
        Font-Bold="true" value="DownloadExcel"  OnClick="Download_Click" OnClientClick="ShowProgress();"
        runat="server"  Height="23px" Width="120px"></asp:Button>
    <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="upAlignBuyer"  >
        <ProgressTemplate>
            <div id="overlay">
                <div id="modalprogress">
                    <div id="theprogress">
                        <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/App_Themes/Images/progress.gif" />
                            Please wait...
                    </div>
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>

So the problem with this is, loading image loads properly and file gets downloaded properly but it keeps displaying the loading image even after file gets downloaded. Any help will be great.

This might not be a good solution, but i am going with this direction. looks like when the file gets downloaded the page state is never set to "complete" it was always ending in "interactive" so this is how i fixed it.

document.onreadystatechange = function () {
      if (document.readyState === "interactive") {
                 HidePrograss();
      }
}

function ShowProgress() {
    document.getElementById('<% Response.Write(prgLoadingStatus.ClientID); 
             %>').style.display = "inline";
 }

function HidePrograss() {
      document.getElementById('<% Response.Write(prgLoadingStatus.ClientID); 
            %>').style.display = "none";
}

this way updateprogress will not be displayed anytime and during file download it will set display none which is what i want.

If anyone have better solution please do let me know.