Thursday, September 24, 2015

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

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" />

Note: We can get different image from the following link



#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


            .success(function(response) {
                $scope.names = response.records;
            });        $("#loading").hide();

No comments:

Post a Comment