How to Show the progressbar to Adding PostBackTriggers and AsyncPostBackTriggers to UpdatePanel in asp.net?

I have a page with a ToolkitScriptManager and three update panels each update panel have triggers based on controls , now my problem is fire any server side events show the progressbar like percentages Example, How to show like that in PostBackTriggers and AsyncPostBackTriggers controls , my code is

     <asp:UpdatePanel ID="up1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TxtZip" EventName="textchanged" />
    </Triggers>
    <ContentTemplate>
        <asp:TextBox ID="TxtZip" runat="server" AutoPostBack="true" ClientIDMode="Static"
            MaxLength="6" onkeypress="return isNumberKey(event)" CssClass="txtstyle" OnTextChanged="TxtZip_TextChanged"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:PostBackTrigger ControlID="IBtnSave" />
    </Triggers>
    <ContentTemplate>
        <span class="art-button-wrapper"><span class="l"></span><span class="r"></span>
            <asp:Button ID="IBtnSave" runat="server" Text="Submit/Save" CssClass="art-button"
                ClientIDMode="Static" OnClientClick="return postbackButtonClick()" OnClick="IBtnSave_Click" />
        </span>
    </ContentTemplate>
</asp:UpdatePanel>

my progress bar code

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
                        <ProgressTemplate>
                            <div id="Progressbar" class="Progressbar" align="center" valign="middle" runat="server">
                                <asp:Image ID="Image1" Width="75" Height="95" runat="server" ImageUrl="~/images/animation_processing.gif" />
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>

and java script code is

<script type="text/javascript">
        //update panel and postback trigger with fileupload control upadteprogressbar code
        var updateProgress = null;
        function postbackButtonClick() {
            updateProgress = $find("<%= UpdateProgress1.ClientID %>");
            window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
            return true;
        }
</script>

This code working only postbacktrigger reason is when button click before fire onclick event , that event to call java script function , but Async Postback trigger does not call that function, how to handle that code and display the progressbar with percentages process, give me any suggestion

Just add the bellow code in aspx content page it working fine

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <script type="text/javascript">

      Sys.Application.add_init(appl_init);

      function hideProgressBar() {

//          var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
//          updateProgress.style.visibility = "hidden";
          $("#MainContent_UpdateProgress1").hide()
      }

      function appl_init() { 

          var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
          pgRegMgr.add_beginRequest(postbackButtonClick);
          pgRegMgr.add_endRequest(hideProgressBar)
      }

</script>