Show progress circular during $http post?

Question

What is the best way to use Angular Material's Progress circular component with a $http request?

I currently have the code like this below:

Progress circular:

<md-progress-circular ng-if="determinateValue === 100" md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>

$http request:

$scope.determinateValue = 0;

$http.get("/posts")
       .success(function (data) {

          $scope.posts = data;
          $scope.determinateValue = 100;

       })

Answer 1

I hope this code helps.

  var isLoadingShown = false;

  $scope.$watch(function() {
    return $http.pendingRequests.length;
  }, 
  function(newValue, oldValue) {
    console.log(newValue);
    if(newValue !== 0) {
      if(!isLoadingShown) {
        showLoading();         
      }
    }
    else hideLoading();
  });

  function showLoading(){
    isLoadingShown = true;   
    $mdDialog.show({
      template: '<md-dialog style="background-color:transparent;box-shadow:none;overflow: hidden !important;">' +
                  '<div layout="row" layout-sm="column" layout-align="center center" aria-label="wait">' +
                    '<md-progress-circular class="md-hue-2" md-diameter="50px"></md-progress-circular>' +
                  '</div>' +
                '</md-dialog>',
      parent: angular.element(document.body),
      clickOutsideToClose:false,
      escapeToClose: false,
      fullscreen: false
    });
  }

  function hideLoading(){
    $mdDialog.cancel();
    isLoadingShown = false; 
  }

Answer 2

If you want a version of md-progress-circular that also inhibits the screen and has a backdrop place the md-progress-circular inside an mdDialog like this:

     function showWait(){
          $mdDialog.show({
            controller: 'waitCtrl',
            template: '<md-dialog style="background-color:transparent;box-shadow:none">' +
                        '<div layout="row" layout-sm="column" layout-align="center center" aria-label="wait">' +
                            '<md-progress-circular md-mode="indeterminate" ></md-progress-circular>' +
                        '</div>' +
                     '</md-dialog>',
            parent: angular.element(document.body),
            clickOutsideToClose:false,
            fullscreen: false
          })
          .then(function(answer) {

          });
   }

here is a plunker i created that shows how Plunker

Answer 3

I don't think you need the value attribute here with determinate mode. Instead you should use indeterminate mode, then show and hide the progress indicator using ngShow.

<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>

And in your JS

$scope.isLoading = true;
$http.get("/posts")
   .success(function (data) {
        $scope.isLoading = false;
   });

Answer 4

All answers are right just add one more thing that $http request is asynchronous you should use like this

$scope.$apply(function(){
$scope.isLoading = false;
});

And as whole like this

<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>

And in your JS

$scope.isLoading = true;

$http.get("/posts")
   .success(function (data) {
         $scope.$apply(function(){
           $scope.isLoading = false;
         });
   });

Note:- Source of the answer is the accepted answer.