How to display a loading message or design while the page is loading in asp.net?

Question

How to display a loading message or image while the page is loading?

For example, when I click a button for adding items, it takes some time to finish loading, while it is loading, the page is active. What I want is a little loader to appear in the middle of the page and that page will turn inactive. When the page has finished loading, the loader will be gone and the page will get active.

What language / technology (apart from asp.net) are you using? — Stefan Steinegger, Jan 22 '13 at 07:31
set a **div** with loading img or msg and `display:Block` on button click, and on serverside at the end of code set `display:none`. — Satinder singh, Jan 22 '13 at 07:31
It may be worth checking [this answer from webarto](http://stackoverflow.com/a/3535072/30512). — Echilon, Jan 22 '13 at 08:13
@Echilon- thanks for the suggestion but I want is to generate a loader using only asp.net, vb, html and ccs. — , Jan 22 '13 at 08:17

score 1 · Accepted Answer · edited May 23 '17 at 10:34

Assuming you are using ASP.NET Webforms

You can easily use an UpdatePanel associated with an UpdateProgress control.

UpdatePanel allow you to use async to interact with server. You can add an UpdateProgress control and link it with the UpdatePanel to show something (Gif, Text,..) when loading is in progress.

Find more informations Here

If you are using Asp.net MVC, you have to do the same trick using Ajax like in this SO question.

score 0 · Answer 2 · answered Jan 24 '13 at 09:06

This is what i have tried I had used YUI for this and added a panel to my code when the button is click

var ANIM_LOAD = YAHOO.namespace("anim_load");
ON button_onClick()
{
StartInitialLoadingPanel("Loading");
}
StartInitialLoadingPanel(msgStrng)
{
if (!TAB_COLLECTION.wait) {

        // Initialize the temporary Panel to display while waiting for external content to load
        TAB_COLLECTION.wait = new YAHOO.widget.Panel("wait",  
                                                                { width: "400px",
                                                                  x: window.screen.center,
                                                                  fixedcenter: true, 
                                                                  close: false, 
                                                                  draggable: false, 
                                                                  zindex:1000,
                                                                  modal: true,
                                                                  visible: true
                                                                } 
                                                              );

        TAB_COLLECTION.wait.setHeader(msgStr);

        TAB_COLLECTION.wait.setBody("<img src='../Images/loading_animation'>");

        TAB_COLLECTION.wait.render(document.body);
    }

    // Show the Panel
    TAB_COLLECTION.wait.show();
}

When the background is executed successfully you can call the method for stopping the animation as

function CancelInitialLoadPanel()
{
    //Hide the Panel    
    if (TAB_COLLECTION.wait) 
    {
        TAB_COLLECTION.wait.hide();
    }
}

Thanks for more details you can see Here

which code you will have to call the function on your button click and then call the panel function fom it....... you can also have a look at http://icant.co.uk/sandbox/yuipanel/ — NetStarter, Jan 25 '13 at 09:13

score 0 · Answer 3 · edited May 23 '17 at 11:55

Here are two links of similar issues. Not sure how to manage the period it takes to render whole page but this might be a start.

Hiding page loading

The page loading animation for hiding whole page load process ends long before It must fade out

Here is one using a timer control Display Ajax Loader while page rendering

$(document).ready(function(){
    $('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
});
$(window).load(function(){ 
    $('#loading').fadeOut(600, function(){
        $("#wrap").fadeIn(1000);
        $("#footer").fadeIn(1000);
    });
});

How to display a loading message or design while the page is loading in asp.net?

3 Answers3