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, Feb 05 '17 at 14:42
@Aravind Can you answer for my another question ? http://stackoverflow.com/questions/42532079/how-to-load-css-by-using-requirejs Thanks for your support man — Shabeeb Ck, Mar 01 '17 at 15:12
@ShabeebCk you already have an answer there! you want my solution still? — Aravind, Mar 01 '17 at 15:13
@Aravind I ams till looking for solution, its very hard to find tutorial for require-css on web :( — Shabeeb Ck, Mar 01 '17 at 15:15
instead of requirejs I would rather suggest you with this solution of mine http://stackoverflow.com/questions/40643629/angularjs-dynamic-loading-of-script-files-using-lazyload-webpack/40688693#40688693 still if you need requirejs to be fixed I can work on it for u — Aravind, Mar 01 '17 at 15:17

Aravind · Accepted Answer · 2017-02-05T15:30:08.677

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

score 1 · Answer 2 · answered Feb 05 '17 at 15:22

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

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

2 Answers2

Linked