Ajax.ActionLink loading image positioning with background opacity

Go To StackoverFlow.com


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">
         <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>    

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.


2012-04-04 00:49
by NoName


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
2012-04-04 05:42
by Darin Dimitrov
thank a lot for great answer - NoName 2012-04-04 09:25