CODEWITHSUNDEEP
javascriptangularjsspinnerjquery-spinner
forgottofly
forgottofly

Reputation: 2719

Load Angular Spinner on http request

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

Upvotes: 3

Views: 7758

Answers (2)

Roco CTZ
Roco CTZ

Reputation: 1117

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:

  1. 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.

  2. 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.

  3. 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.

Upvotes: 2

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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

Upvotes: 6

Related Questions