Показывать цикл прогресса во время публикации $http?

Я не думаю, что вам нужен атрибут value здесь с режимом determinate. Вместо этого вы должны использовать режим indeterminate, а затем отображать и скрывать индикатор выполнения с помощью ngShow.

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

И в вашем JS

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

Если вам нужна версия md-progress-circular, которая также блокирует экран и имеет фон, поместите md-progress-circular внутри mdDialog следующим образом:

     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) {

          });
   }

вот плункер, который я создал, который показывает, как плункер

Все ответы верны, просто добавьте еще одну вещь, что $http запрос является асинхронным, который вы должны использовать следующим образом.

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

А в целом вот так

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

И в вашем JS

$scope.isLoading = истина;

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

Примечание. – Источником ответа является принятый ответ.

Вы должны подключиться к событиям $httpProvider:

angular.module('common')
  .config(['$httpProvider', function($httpProvider){
    $httpProvider.interceptors.push(['$rootScope', '$q', '$timeout',
      function($rootScope, $q, $timeout) {
        return {
          request: function(config) {
            $rootScope.posting = new Date().getTime();
            $rootScope.$broadcast('$postingStart', config.url);
            return $q.resolve(config);
          },
          response: function(response) {
            $rootScope.posting = false;
            $rootScope.$broadcast('$postingEnd', response.config.url);
            return $q.resolve(response);
          },
          responseError: function(response) {
            $rootScope.posting = false;
            $rootScope.$broadcast('$postingEnd', response.config.url);
            return $q.reject(response);
          }
        };
      }]);
  }])
.run(['$mdDialog', '$rootScope', function($mdDialog, $rootScope){
  var showing = false;

  function showWait() {
    if(showing) return;
    $mdDialog.show({
      controller: 'waitCtrl',
      template: '<md-dialog id="plz_wait" 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) {
        showing = false;
      });
  }


  $rootScope.$on('$postingStart', function(event, url) {
    if (!$rootScope.postingStartTimer) {
      $rootScope.postingStartTimer = $timeout(function() {
        showWait()
      }, 250);
    }
  });

  $rootScope.$on('$postingEnd', function(event, url) {
    if ($rootScope.postingStartTimer && posts.length === 0) {
      $timeout.cancel($rootScope.postingStartTimer);
      $rootScope.postingStartTimer = false;
      if(!showing) return;
      $mdDialog.cancel();
    }
  });

}])

Я надеюсь, что этот код поможет.

  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; 
  }

Сначала установите какую-нибудь модель:

$scope.loading=false;

Привяжите эту модель к свойству ng-show элемента progress round:

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

Установите для него значение true перед вызовом запроса $http и установите значение false для $http .success:

$scope.loading=true;

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

      $scope.posts = data;

      $scope.loading=false;

   })

Надеюсь, это поможет.

Если вы хотите следить за ходом обработки данных, используйте uploadEventHandlers.

Есть пример.

$http({
    method: 'POST',
    url: '/uploadToFtp',
    headers: {
        'Content-Type': undefined
    },
    eventHandlers: {
        progress: function(c) {
            //console.log('Progress -> ' + c);
            //console.log(c);
        }
    },
    uploadEventHandlers: {
        progress: function(e) {
            //console.log('UploadProgress -> ' + e);
            //console.log(e);
            _self.progressValue = (e.loaded / e.total) * 100.0;
        }
    },
    data: postData,
    transformRequest: angular.identity
})
.then(callBack,errorCallBack)
.catch(errorCallBack);

Покажите циркуляр прогресса, как это

<md-progress-circular ng-if="ctrl.progressValue > 0 && ctrl.progressValue < 100" md-mode="determinate" value="{{ctrl.progressValue}}"></md-progress-circular>