How to make a loading (spin) while requesting to server by $http on angularJS

Question

$http({
      method: 'POST',
      url: '',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
      data: {
      }
      }).then(function successCallback(response) {
          // this callback will be called asynchronously
          // when the response is available

        if(response.data == 'true'){
            swal("Good job!", "New case has been created", "success");
        }
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

I want to show a progress bar or spin on bootstrap while http request on angularjs

You could add a loading div or img and then put an ng-if attribute on it, setting some showLoader variable in your $scope to true just before you start your request, and then set to false on success or error. — forrestmid
– forrestmid, Commented Feb 5, 2017 at 14:42
@Aravind Can you answer for my another question ? stackoverflow.com/questions/42532079/… Thanks for your support man — Shabeeb Ck
– Shabeeb Ck, Commented Mar 1, 2017 at 15:12
@ShabeebCk you already have an answer there! you want my solution still? — Aravind
– Aravind, Commented Mar 1, 2017 at 15:13

Aravind · Accepted Answer · 2017-02-05 15:30:08Z

Sugessting you to use this angular-loading-bar

Steps

Include the script references and css as mentioned in the above github, you can use cdn as well as mentioned.

Add these two functions in your controller

$scope.start = function() {
  cfpLoadingBar.start();
};

$scope.complete = function () {
   cfpLoadingBar.complete();
}

Include the 'angular-loading-bar', 'ngAnimate' as dependencies.

Add the below code for the app configurations

If you are looking for the progress bar

app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
   cfpLoadingBarProvider.includeSpinner = false;
}])

If you are looking for a spinner

app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
   cfpLoadingBarProvider.includeSpinner = true;
}])

Finally, In your $http request call the $scope.start() function and in your success method call the $scope.complete()

LIVE DEMO

Thierry · Accepted Answer · 2017-02-05 15:22:49Z

1

A simple way:

html:

<div class="spinner" ng-show="loading"></div>

js :

$scope.loading = true
$http.post(...).then(function(response){
  $scope.data = response.data // or whatever you needs...
  $scope.loading = false
},function(){
  $scope.loading = false
  console.log("error")
})

If you want to generalize, you can also have a look to http interceptor : https://docs.angularjs.org/api/ng/service/$http#interceptors

answered Feb 5, 2017 at 15:22

Thierry

5,2533 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to make a loading (spin) while requesting to server by $http on angularJS

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related