CSS Implement Image loading on ajax call

                    Implement Image loading on ajax call

When we have a long awaiting ajax call we would like to disable any click events from the user. We can achieve this as shown below.

• we need an div tag
• Gif loading image
• Css class
• Javascript to show and hide the div and image

html 

We can have this image on the top of all the html tags

<div id="divLoader">
        <div id="loading">
            <img class="loadingImage" src="~/Content/image/ajax-progressive.gif" />
        </div>

</div>  

Note: We can get different image from the following link

ImageLink

CSS

#divLoader {
   position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    z-index: 100000;
    display: none;
    text-align: center;
 }


 .xclose {
    position: absolute;
    padding-left: 838px;
    padding-top: 421px;
    z-index: 100001;
}
 .loadingImage {
  margin: 295px;
    height: 129px;
}

We can show or hide the div using java script
Based on the event show the loading image

  $("#divLoader").show();
  $("#loading").show();

$http.get("http://www.w3schools.com/angular/customers.php")
            $("#divLoader").show();
            $("#loading").show();
            .success(function(response) {
            $("#divLoader").hide();
            $("#loading").hide();
                $scope.names = response.records;
            });        $("#loading").hide();