We have all seen them before, the loading screens that seem to appear out of nowhere.  These ajax based screens have recently become a trend over the last few years, reaching the eyes of millions of web developers trying to figure out the most effective way to recreate this. 

Creating an AJAX Loading screen is simple, if you know are familiar with AJAX controls, however when trying to create this look and feel with simple CSS controls in the .Net studio, things can become a little fuzzy.  Don’t get discouraged, this is actually a very simple task.

The first step in creating this loading screen is to create an update control in the .Net framework.  This loading control must have a “delay”, otherwise known as the Display After command.  For the sake of loading time, I usually set my DisplayAfter command to 600.

Inside of the update progress control, create a progress template.  This progress template is going to hold the meat of the loading screen. 

Once inside the progress template, create a division with.  This is going to be the beginning of the css calls. Then create another division with the.  This division is going to control the text the loading screen displays, as well as the optional image.

The CSS that controls all this functionality is contained in the following code:

With all of this put together, this should create the AJAX Style loading screen many desired but few have been able to replicate.  To recap, simply create an update progress control and populate it with the CSS you wish to use.

This entry was posted on Thursday, March 11th, 2010 at 9:11 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.