Angular Loading spinner or Preloading image with finally

In previous we have learn how to add ajax loading image/text on processing of Ajax request, here i am taking one step ahead and adding same functionality for angular application using AngularJS.
Angular is popular and powerful tool for frontend UI which has predefined directive that will help to improve you HTML page performance. We are using ngshow directive for show and hide image.

You can also check other tutorial of angular,

Option 1 :

There are following Steps to add Loading spinner on page using without any plugin.

Step 1: Defined a variable $scope.loader = true; in starting service function.
Step 2: Added html on dashboard template

Step 3: Added ng-show on target div(where data will load).

Step 4: Hide loader on service finally callback method.

.finally(function() { // called no matter success or failure
$scope.tempLoader = false;
});

Option 2 :

Spinner using Angular directive

Angular directive for ajax loading indicator. This directive uses .Detects any ajax request and shows the spinner.

Download Angular Loading Spinner

Leave a Reply

Your email address will not be published. Required fields are marked *