Update progress bar not working with postbacktrigger

Question

I have update progress in master page which shows the loader whenever the content page is refreshed or on postback but on my content page everything is working fine execpt for the download button where the loader does not get disabled when clicked.

this is the master page:

<div class="container-fluid" id="body">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="menuBar" />
            <asp:AsyncPostBackTrigger ControlID="MenuCategories" />
        </Triggers>
    </asp:UpdatePanel>

    <asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0">
        <ProgressTemplate>
            <div class="ui-widget-overlay">
                <div id="dvLoading">
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</div>
<script type="text/javascript">
    var updateProgress = null;
    function postbackButtonClick() {
        updateProgress = $find("<%= progress.ClientID %>");
        window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
        return true;
    }
</script>

this is my content page:

<asp:Content ID="Content2" ContentPlaceHolderID="BodyContentPlaceHolder" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
         <table style="float: right;">
            <tr>
                <td class="Asplabel"><b>No of Records:</b></td>
                <td>
                    <asp:Label ID="lblRecordsCount" runat="server" Text="" CssClass="Asplabel" Font-Bold="true"></asp:Label>
                </td>
                <td>
                        <asp:LinkButton ID="BtnDownload" ClientIDMode="Static" OnClientClick="return postbackButtonClick();" runat="server" Enabled="true" ToolTip="Download Files" CssClass="btn" style="color: #0089d0;" OnClick="BtnDownload_Click">
                        <i class="fa fa-download"></i>
                        </asp:LinkButton>
                </td>
            </tr>
        </table>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="BtnDownload"/>
    </Triggers>
    </asp:UpdatePanel>
</asp:Content>

On page load loader is working fine and also for other controls where postback occurs except for the download button the loader shows up but does not fade away How should i set the visibilty false for the download button after the pasotback occurs?

Answer 1

For postbacktrigger controls, update progress can be shown like

Show:

var updateprogress = document.getElementById('<%=((UpdateProgress)Master.FindControl("UpdateProgress1")).ClientID %>');
updateprogress.style.display = "inline-block";

Hide:

var updateprogress = document.getElementById('<%=((UpdateProgress)Master.FindControl("UpdateProgress1")).ClientID %>');
updateprogress.style.display = "none";