Overlay a div with loading spinner image in center

At times when you are working with Asynchronous Ajax calls, you want to show a loading spinner on the center of the div which notifies the user that the API call is still in progress.

Let see how we can use CSS and a simple loader image to achieve the same.

Here is the HTML div that we are working with

	<div id="ajaxForm">
		<div class="loader"></div>
		<p>Some Content</p>
		<p>..</p>
		<p>..</p>
		<p>..</p>
		<p>Some More Content</p>
	</div>

Here div with an id of ajaxForm is the div that we are looking to overlay our div with. And the div with the class of loader is the overlay div.

Following is the CSS that will display overlay div with the loading spinner

#ajaxForm{
    width:200px;
    height:200px;
    background-color: #CCCCCC;
    position: relative;
}
.loader{
    position: absolute;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    background-color:#eceaea;
    background-image:url('ajax-loader.gif');
    background-size: 50px;
    background-repeat:no-repeat;
    background-position:center;
    z-index:10000000;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

[WP-Coder id="16"]