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

Could you please add a link to a JS fiddle or Plnkr with your code or something that you've tried so far? — Roco CTZ, Dec 15 '14 at 03:58
I haven't tried yet.I wanted to know the way how this can be linked with the GET requests in the controller — forgottofly, Dec 15 '14 at 04:02
You can use `$http` service interceptors, see http://stackoverflow.com/questions/15033195/showing-spinner-gif-during-http-request-in-angular — Fu Cheng, Dec 15 '14 at 04:26
checkout my [factory](https://www.npmjs.com/package/angular-httpshooter), i think it will help you out — Siddharth, Jan 08 '17 at 07:38

score 6 · Accepted Answer · answered Dec 15 '14 at 04:32

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

score 2 · Answer 2 · answered Dec 15 '14 at 04:33

First of all you need to follow these instructions on how to install angular-spinkit in your project.

Second of all, please see this Plnkr to see how I managed to use angular spinkit for GET calls.

These are the main steps:

Insert your <circle-spinner></circle-spinner> directive into the code but make it invisible using ng-show like this:

<circle-spinner ng-show="showSpinner"></circle-spinner>

showSpinner is a $scope variable that we iniate as false as we don't want the spinning circle to show until we make the $http call.
Make your GET call using the angular $http service. Use a function to do so. When you call the function, the first thing is to set the $scope.showSpinner variable to true so your spinner is visible. Then you make the $http call.
Next step is to handle the GET response. When the call is finished (you have the success or the error options), you have to tell the $scope.showSpinner variable to become false which means the ng-show from the <circle-spinner> directive will become false so the circle is not displayed anymore.

Long story short, you show an invisible spinning circle, you make an $http call that makes it visible; when the response is back, the spinning circle is not visible anymore.

Load Angular Spinner on http request

2 Answers2