CODEWITHSUNDEEP
javascriptjqueryangularjs
SharpCoder
SharpCoder

Reputation: 19183

showing loading image (hour glass) over a div when data is loading in div

I am working on AngularJS application.In the application one of the DIV is displaying grid data. What I want is, when the grid is loading data, system should show the loading image on top of the div & when the data is loaded, it should remove that image.

If I follow the classic way, when data load event is triggered, we can manually show the image on top of the div and when data is fully loaded, we can manually hide the loading image.

Can we automate this process and leave it to AngularJS or any other library to decide when to show and when to hide the loading image. Something like, as long as inner HTML of DIV is getting modified, it should display the loading image.

Upvotes: 0

Views: 532

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191819

Yes you can automate this process and leave it to AngularJS using data bindings.

<i class=loading-icon ng-if=!ctrl.data.length></i>


app.controller("ctrl", function ($http) {
    var ctrl = this;
    ctrl.data = [];

    $http.get(url).success(function (data) {
        ctrl.data = data;
    });
});

Upvotes: 1

Rudy
Rudy

Reputation: 2373

In the HTML add data-ng-if="isLoading" to the loading div, then in the js where you load the data set scope.isLoading as true at the before making the request and on load complete set it to false.

Upvotes: 0

Related Questions