Load Angular Spinner on http request

Question

I'm trying to use Angular Spin Kit in my project to load the spinner on every http GET,PUT,POST and DELETE method. Here's the fiddle for Angular Spin Kit.

Angular Spin kit

<circle-spinner></circle-spinner>

How can I connect this spinner with my controller code so that when a http call gets invoked I can load this spinner in my view.Thanks

Answer 1

you can use a $scope variable to detect a progressing of a ajax request. based on that variable you can show or hide the spinner

 $scope.sendAjax = function() {
    $scope.prograssing = true;                // show spinner
    $http.get('data.json').then(function() {
      //sucess
      $scope.prograssing = false;          // hide spinner when success ajax
    } , function() {
      //error
      $scope.prograssing = false;        // hide spinner when unsuccessful ajax
    });
 }

here is the working plunker