The common approach is to either provide the user with some type of alert, pop-up, or just display a spinning icon. In this tutorial, we will cover how to create a web page that contains a link that will initiate this type of process. We will not go into the specifics related to Ajax, just provide you with some sample code that you can use to integrate into your web projects. In the example code below, you will notice some basic HTML and CSS markup. In the JavaScript section, there are three functions provided. Two of the functions simply handle the showing and hiding of the modal type pop-up thatwill be displayed once the link is clicked. We consider it to be modal because the rest of the page is not accessible until the pop-up is closed. We do this by introducing an additional

element on the page that takes 100% of the display and sits between this modal pop-up and the content div. When this modal pop-up is displayed, we also display the fade div and apply some styles such as opacity so that the user can slightly see the contents in the background. In the loadAjax() function, all we are doing is showing and hiding this modal pop-up during the process of starting and ending our Ajax process.

Example

The following snippets of code can be used to create a simple page that contains a link. When clicked, will display a loading “spinner” that will be displayed until the data called by the Ajax function is retrieved from the web server. The CSS can be located within the