When I click the ajax.action link, I want to display loading image in the middle of the page with backgroung opacity.

<img id="image_loading" alt="" src="../../images/site/loading.gif" style="position: fixed;     
     display: none;" />

Here is my code

<nav class="ust_menu">
    <ul>
         <li>@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>
         <li>@Ajax.ActionLink("Contact Us", "Contact", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>
         <li>@Ajax.ActionLink("About", "About", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>    
    </ul>
</nav>

I can show image without background opacity and not the position I want. How can I show loading image in the middle of page with background opacity.

Thanks.

• asp.net-mvc
• asp.net-ajax
• loading

To center the image:

<img id="image_loading" alt="" src="@Url.Content("~/content/loading.gif")" class="progress" />

and in CSS file:

.progress {
    display: none;
    position: fixed;
    top: 50%;
    left : 50%;
    margin-top: -50px;
    margin-left: -100px;
}

Now if you want to do some more fancy effects you could subscribe to the OnBegin and OnComplete callbacks where you will have more control over the way the image is shown:

@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { 
    OnBegin = "onBegin",
    OnComplete = "onComplete",
    UpdateTargetId = "article_site"
})

and then:

function onBegin() {
    // TODO: show the progress image
}

function onComplete() {
    // TODO: hide the progress image
}