A great UI and usability feature for websites that utilise AJAX is to display the current progress of a page request when posting back to a web server.
In this tutorial we will be building a global progress handler for a website that will display a simple progress bar whenever a post back occurs. The progress indicator will only be displayed if a page request is taking longer than expected and will appear in the centre of the web page independent of the current scroll position of the web page.
The global progress handler relies on the UpdateProgress and AlwaysVisibleControl controls to implement the current progress functionality. The UpdatePanel control is located in the AJAX Extensions section on the toolbar as seen in the figure below. The AlwaysVisibleControl control is located in the AJAX Toolkit section on the toolbar as seen in the figure below.
Add the following AJAX Extension and AJAX Toolkit controls to your master page or web form. These controls will be used to display the progress of the current request when the page posts back to the web server.
Ensure you that your form’s server controls are wrapped with an UpdatePanel control which will handle the AJAX request and display the AlwaysVisibleControl and UpdateProgress controls.
Once you have completed the above steps you will need to download an AJAX loader animated image from the web and implement some CSS styles to get the desired layout and effect as seen below in the following real world example.


