2

I need to show a "loading" indicator when the page is loading. I am getting data from from other servers in code behind page and binding the list view. I am not using update panel neither I am getting data through ajax. So how can I show a "Loading" indicator as the page is taking long time to load.

Thanks in advance.

Dukhabandhu Sahoo
  • 1,394
  • 1
  • 22
  • 44

1 Answers1

5

You create a containing div with a loading gif in the center of it. When you start your ajax request you show it (with jquery for example) when the ajax request is done you hide it.
It could/should look something like this :
Code to show the loading indicator : 

 $('#busy-holder').show();

div :

<div id="busy-holder" style="display: none">
    <div id="busy">

    </div>
</div>

css :

#busy
{
    position: fixed;
    left: 50%;
    top: 50%;
    background: transparent url("loader.gif");
    z-index: 1000;
    height: 66px;
    width: 66px;
}

#busy-holder
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    display: none;
    filter: alpha(opacity=30);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    opacity:0.3;
    -moz-opacity: 0.30; 
    z-index: 1000;
}
Kristof
  • 3,267
  • 1
  • 20
  • 30
  • Thank you. But one problem is that I am not getting data through ajax. I am getting data in the code behind of page load. – Dukhabandhu Sahoo May 11 '12 at 09:10
  • If im not wrong, I doubt that can be done because your html is not fully built by the server controls. – zen.c May 11 '12 at 10:03
  • You are not using ajax so the page will be instantly redirected. This will stop all gifs from rotating but you should still be able to show the container with gif on top of it. Just put a onClientClick on your button and call $('#busy-holder').show() from there. – Kristof May 11 '12 at 11:17
  • Thank you very much. Can you suggest What I should do for this particular case ? When I am clicking the button from one page, I am navigating to another page(as required).Like When I am clicking the search button from Home page, I am navigating to SearchDetails page.The search Details page is taking long time to load. I need to show a "loading" indicator when the SearchDetails page is loading – Dukhabandhu Sahoo May 11 '12 at 12:50
  • 1
    Personally i would just say meh to the customer and only show a text stating LOADING without a moving part. If however you are trying to impress the ladies you could check this link out , it might be what you need. http://blog.ysatech.com/post/2010/02/06/ASPNET-redirect-a-web-page-with-AJAX-loading-indicator-image.aspx – Kristof May 11 '12 at 13:11