Hide Ajax UpdateProgress loader image after Response.End in ASP.Net

I have added one download excel button inside updatepanel with Ajax updateprogress, but the problem is file gets downloaded but loader is not getting hide from the screen after download.

<asp:UpdatePanel ID="up11" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button ID="downloadformat" runat="server" Text="Download Format" CssClass="btn btn-success"
            OnClick="downloadformat_Click" OnClientClick="showProgress()" />
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="downloadformat" />
    </Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="up11">
    <ProgressTemplate>
        <div class="overlay">
            <div style="z-index: 1000; margin-left: 35%; margin-top: 300px; opacity: 1; -moz-opacity: 1;">
                <img alt="" src="loading.gif" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

System.IO.FileInfo file = new System.IO.FileInfo(Server.MapPath("~/FormatFW.xlsx"));
if (file.Exists)
{
    Response.Clear();
    Response.AddHeader("Content-Disposition", "attachment; filename=FormatFW.xlsx");
    Response.AddHeader("Content-Length", file.Length.ToString());
    Response.ContentType = "application/ms-excel";
    Response.WriteFile(file.FullName);
    Response.Flush();
    Response.End();
}

css

.overlay
{
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}

javascript

function showProgress() {
    var updateProgress = $get("<%=UpdateProgress1.ClientID %>");
    updateProgress.style.display = "block";
    window.setTimeout(function () {
        updateProgress.set_visible(true);
    }, 100);
}