Show loader image on partial postback is not working

See more:

ASP.NET

Javascript

HTML

Ajax

, +

I have a master page and a child page in an asp.net website.
On master page, I have a script manager and have connected to appropriate jquery files as under:

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-ui.js"></script>

In the content page I have some textboxes and a button inside updatepanel control. Clicking on that button partially posts back to server and fetches the data.
This much is working fine till now.
However I am facing a problem. I want to show a loader image during the partial processing which is not showing on clicking the button. On Master Page, I have placed a script manager inside form tag as under:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

I have created the following div for loader on content page:

<div class="loader">
    <img src="images/loading2.gif" alt="">
</div>

Here is my css for the loader image:

.loader 
{
 position: fixed;
 left: 0px;
 top: 0px;
 height: 100%;
 width: 100%;
 z-index: 9999;
 display: none;
}
.loader img
{
 display:block;
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin:auto;
}

On Content Page, I have written the Jquery as under:

<script>
    $(document).ready(function () {
        $('.loadloader').click(function () {
            $(".loader").show();
        });
    });
</script>

Note: Here loadloader is the class of the asp.net button clicking on which the partial postback occurs and loader image should show. Have a look below:

<asp:Button ID="btn_apst2proceed" runat="server" ValidationGroup="st1" Text="Proceed" onclick="btn_apst2proceed_Click" class="loadloader" />

On the page load event of content page, I have written this script:

if (((ScriptManager)this.Master.FindControl("ScriptManager1")).IsInAsyncPostBack)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<script language='javascript' type='text/javascript'>");
    sb.Append("Sys.Application.add_load(func);");
    sb.Append("function func() {");
    sb.Append("Sys.Application.remove_load(func);");
    sb.Append("$('.loader').hide();");
    sb.Append("}");
    sb.Append("</script>");
    ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false);
}
Page.Header.DataBind();

Everything seems fine to me but I donot understand why the loader image is not showing on partial post back. Kindly help.

What I have tried:

Explain it in the explanation itself.