как я могу добавить один общий загрузчик или прогресс бар для всего проекта

Question

Я делаю мой проект в angularjs как я могу добавить один общий загрузчик или прогресс бар для всего проекта с помощью CSS вместо вызова показать/скрыть блок функции для каждого класса div.

Answer 1

Для этого вам нужно написать перехватчик. Чтобы узнать о перехватчике, обратитесь: https://docs.angularjs.org/api/ng/service/ $ http

Но кто-то уже выполнил все работы, поэтому зачем изобретать колесо! http://chieffancypants.github.io/angular-loading-bar/

Answer 2

Пока вы не получите ответ вы можете поставить ожидания диалога .. после получения ответа вы можете скрыть диалог .. Вот ссылка простого диалога с помощью JQuery waitingDialog

И этот диалог может лучше всего использовать с угловой, и вы можете изменить его в соответствии с вашим требованием так удачи ..

ли это что-то вроде этого

angular.module('app').factory('httpInterceptor', ['$q', '$rootScope', 
    function ($q, $rootScope) { 
     var loadingCount = 0; 

     return { 
      request: function (config) { 
       if(++loadingCount === 1) $rootScope.$broadcast('loading:progress'); 
       return config || $q.when(config); 
      }, 

      response: function (response) { 
       if(--loadingCount === 0) $rootScope.$broadcast('loading:finish'); 
       return response || $q.when(response); 
      }, 

      responseError: function (response) { 
       if(--loadingCount === 0) $rootScope.$broadcast('loading:finish'); 
       return $q.reject(response); 
      } 
     }; 
    } 
]).config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('httpInterceptor'); 
}]); 

Затем используйте событие, связанное с $rootScope в любом месте (предпочтительнее использовать в директиве или запустить блок app.js):

$rootScope.$on('loading:progress', function(){ 
    // show loading gif 
}); 

$rootScope.$on('loading:finish', function(){ 
    // hide loading gif 
}); 

Вы можете прочитать об этом здесь codingsmackdown

Answer 3

Вы можете использовать угловую загрузку -bar http://chieffancypants.github.io/angular-loading-bar/#

Это лучший индикатор прогресса, работающий в фоновом режиме.

Вот документация http://angular-js.in/loading-bar/

Также демка доступна там.

Чтобы изменить цвет бара использования загрузки CSS

#loading-bar .bar { 
    background-color: #2CA01C; 
}